/* global React, MachineRender */
const { useState: useS3, useEffect: useE3 } = React;

// ============ GLOBAL PROJECTS MAP ============
function ProjectsMap() {
  const [active, setActive] = useS3("egypt");
  const [filter, setFilter] = useS3("all");

  const projects = [
    { id: "india", country: "India", x: 70, y: 52, client: "Cipla Health", solution: "EFF-PACK 100", outcome: "1M tablets/shift", industry: "pharma" },
    { id: "egypt", country: "Egypt", x: 56, y: 50, client: "Pharco Pharmaceuticals", solution: "Complete EFF Line", outcome: "Multi-product flexibility", industry: "pharma" },
    { id: "germany", country: "Germany", x: 52, y: 36, client: "Confidential", solution: "RMG + FBD", outcome: "Validated batch consistency", industry: "pharma" },
    { id: "brazil", country: "Brazil", x: 32, y: 65, client: "Hypera Pharma", solution: "EFF-PACK 4T", outcome: "Effervescent expansion", industry: "nutra" },
    { id: "usa", country: "USA", x: 18, y: 42, client: "Confidential", solution: "Tablet Coater", outcome: "FDA-ready installation", industry: "pharma" },
    { id: "indonesia", country: "Indonesia", x: 80, y: 64, client: "Konimex", solution: "EFF-PRO + EFF-PACK", outcome: "Regional capacity scale-up", industry: "nutra" },
    { id: "uae", country: "UAE", x: 60, y: 52, client: "Julphar", solution: "Granulation Line", outcome: "GCC market growth", industry: "pharma" },
  ];

  const filtered = filter === "all" ? projects : projects.filter(p => p.industry === filter);
  const a = projects.find(p => p.id === active);

  return (
    <section className="section dark" style={{ padding: "120px 0", overflow: "hidden", position: "relative" }}>
      <div className="blueprint-grid dark"/>
      <div className="container">
        <div className="section-label">Global proof</div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48 }}>
          <h2 className="display display-lg" style={{ maxWidth: "20ch" }}>
            Built for manufacturers across <span style={{ color: "#20C7E8" }}>markets, environments, and scales.</span>
          </h2>
          <div style={{ display: "flex", gap: 6 }}>
            {[["all", "All"], ["pharma", "Pharma"], ["nutra", "Nutraceutical"]].map(([id, lbl]) => (
              <button key={id} onClick={() => setFilter(id)}
                className={filter === id ? "btn btn-dark-solid" : "btn btn-dark"}
                style={{ padding: "8px 14px", fontSize: 12 }}>
                {lbl}
              </button>
            ))}
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 48, alignItems: "stretch" }}>
          {/* Map */}
          <div style={{
            position: "relative",
            background: "linear-gradient(180deg, rgba(16,35,56,0.4), rgba(11,17,23,0.6))",
            border: "1px solid rgba(255,255,255,0.08)",
            borderRadius: 12, padding: 24, minHeight: 520, overflow: "hidden",
          }}>
            <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: "absolute", inset: 24, width: "calc(100% - 48px)", height: "calc(100% - 48px)" }}>
              {/* dotted continent shapes — abstract */}
              <defs>
                <pattern id="dotmap" width="2" height="2" patternUnits="userSpaceOnUse">
                  <circle cx="1" cy="1" r="0.4" fill="rgba(255,255,255,0.18)"/>
                </pattern>
              </defs>
              {/* Approximate landmasses */}
              <path d="M 8 28 Q 14 20 24 22 L 30 26 L 28 36 L 22 44 L 14 42 Z" fill="url(#dotmap)"/>
              <path d="M 26 56 Q 30 50 34 54 L 38 64 L 34 78 L 28 76 L 24 66 Z" fill="url(#dotmap)"/>
              <path d="M 44 24 Q 52 22 60 26 L 66 32 L 62 40 L 50 42 L 44 38 Z" fill="url(#dotmap)"/>
              <path d="M 50 44 L 58 48 L 60 60 L 52 72 L 48 64 L 46 52 Z" fill="url(#dotmap)"/>
              <path d="M 62 32 Q 76 30 82 38 L 88 50 L 82 62 L 72 64 L 64 56 L 62 44 Z" fill="url(#dotmap)"/>
              <path d="M 80 70 L 88 72 L 86 80 L 78 82 Z" fill="url(#dotmap)"/>

              {/* Pins */}
              {filtered.map(p => (
                <g key={p.id} style={{ cursor: "pointer" }} onClick={() => setActive(p.id)}>
                  <circle cx={p.x} cy={p.y} r={active === p.id ? 1.4 : 0.8} fill={active === p.id ? "#20C7E8" : "#1D6FE8"}/>
                  <circle cx={p.x} cy={p.y} r="2.5" fill="none" stroke={active === p.id ? "#20C7E8" : "rgba(29,111,232,0.4)"} strokeWidth="0.2"/>
                  {active === p.id && (
                    <circle cx={p.x} cy={p.y} r="4" fill="none" stroke="#20C7E8" strokeWidth="0.15">
                      <animate attributeName="r" from="2" to="6" dur="1.8s" repeatCount="indefinite"/>
                      <animate attributeName="opacity" from="1" to="0" dur="1.8s" repeatCount="indefinite"/>
                    </circle>
                  )}
                </g>
              ))}
            </svg>

            {/* Map legend */}
            <div style={{ position: "absolute", bottom: 24, left: 24, fontFamily: "var(--font-mono)", fontSize: 10, color: "rgba(255,255,255,0.4)", textTransform: "uppercase", letterSpacing: "0.14em" }}>
              {filtered.length} installations · {new Set(filtered.map(p => p.country)).size} countries
            </div>
            <div style={{ position: "absolute", top: 24, right: 24, fontFamily: "var(--font-mono)", fontSize: 10, color: "rgba(255,255,255,0.4)", textTransform: "uppercase", letterSpacing: "0.14em" }}>
              Live project map
            </div>
          </div>

          {/* Card */}
          <div style={{
            background: "rgba(255,255,255,0.04)",
            border: "1px solid rgba(255,255,255,0.1)",
            borderRadius: 12, padding: 32,
            backdropFilter: "blur(12px)", display: "flex", flexDirection: "column",
          }}>
            <div className="mono" style={{ fontSize: 11, color: "#20C7E8", textTransform: "uppercase", letterSpacing: "0.14em" }}>
              {a.country} · {a.industry === "pharma" ? "Pharmaceutical" : "Nutraceutical"}
            </div>
            <h3 className="display display-md" style={{ marginTop: 14, color: "white" }}>
              {a.client}
            </h3>
            <div style={{ marginTop: 24, paddingTop: 20, borderTop: "1px solid rgba(255,255,255,0.1)" }}>
              <div className="spec-row">
                <span className="k">Solution</span>
                <span className="v">{a.solution}</span>
              </div>
              <div className="spec-row">
                <span className="k">Outcome</span>
                <span className="v">{a.outcome}</span>
              </div>
              <div className="spec-row">
                <span className="k">Year</span>
                <span className="v">2024</span>
              </div>
              <div className="spec-row">
                <span className="k">Status</span>
                <span className="v" style={{ color: "#22C55E" }}>● Operational</span>
              </div>
            </div>

            <div style={{ marginTop: "auto", paddingTop: 24, display: "flex", gap: 8 }}>
              <button className="btn btn-dark-solid" style={{ padding: "10px 16px", fontSize: 13 }}>View case study</button>
              <button className="btn btn-dark" style={{ padding: "10px 16px", fontSize: 13 }}>All projects</button>
            </div>

            {/* Other pins */}
            <div style={{ marginTop: 24, display: "flex", flexWrap: "wrap", gap: 6 }}>
              {filtered.filter(p => p.id !== active).map(p => (
                <button key={p.id} onClick={() => setActive(p.id)}
                  style={{ padding: "5px 10px", fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", border: "1px solid rgba(255,255,255,0.16)", background: "transparent", color: "rgba(255,255,255,0.7)", borderRadius: 999, cursor: "pointer" }}>
                  {p.country}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ ENGINEERING EXCELLENCE — sticky scroll ============
function EngExcellence() {
  const [active, setActive] = useS3(0);
  const features = [
    { num: "01", title: "cGMP-oriented design", body: "Cleanable, contained, and validatable surfaces and structures from concept onward — not retrofitted for compliance." },
    { num: "02", title: "21 CFR Part 11-ready architecture", body: "Audit trail messaging, electronic signatures, and recipe management ready for regulated environments where applicable." },
    { num: "03", title: "PLC-based automation", body: "Centralized PLC control with HMI panels designed for operator clarity, recipe libraries, and supervisory data export." },
    { num: "04", title: "Engineered for high throughput", body: "Continuous-motion designs that sustain throughput at the upper end of OSD volumes — without sacrificing rejection rates." },
    { num: "05", title: "Low-rejection precision", body: "Laser sensors and closed-loop verification at every critical transfer to keep rejection rates measurable in tenths of a percent." },
    { num: "06", title: "After-sales partnership", body: "Installation, validation, training, spares, and remote support — engineered into the relationship, not bolted on." },
  ];

  return (
    <section className="section">
      <div className="container">
        <div className="section-label">Engineering excellence</div>
        <h2 className="display display-lg" style={{ maxWidth: "18ch", marginBottom: 48 }}>
          Six commitments that show up on every shop floor.
        </h2>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 100, height: 540, background: "var(--graphite)", borderRadius: 16, padding: 32, color: "white", overflow: "hidden" }}>
            <div className="blueprint-grid dark"/>
            <div style={{ position: "relative", height: "100%" }}>
              <MachineRender rotation={-12 + active * 4} showHotspots={active < 4}/>
            </div>
            <div style={{ position: "absolute", top: 24, left: 24, fontFamily: "var(--font-mono)", fontSize: 10, color: "rgba(255,255,255,0.5)", textTransform: "uppercase", letterSpacing: "0.14em" }}>
              Feature {features[active].num}
            </div>
            <div style={{ position: "absolute", bottom: 24, left: 24, right: 24 }}>
              <div className="mono" style={{ fontSize: 10, color: "#20C7E8", textTransform: "uppercase", letterSpacing: "0.14em", marginBottom: 6 }}>
                Now showing
              </div>
              <div style={{ fontSize: 18, color: "white", fontWeight: 500, letterSpacing: "-0.015em" }}>
                {features[active].title}
              </div>
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
            {features.map((f, i) => (
              <div key={f.num}
                onMouseEnter={() => setActive(i)}
                style={{
                  padding: "28px 0", borderBottom: "1px solid var(--line)",
                  cursor: "pointer", transition: "all 200ms",
                  opacity: active === i ? 1 : 0.5,
                }}
              >
                <div style={{ display: "flex", gap: 20, alignItems: "flex-start" }}>
                  <div className="mono" style={{ fontSize: 13, color: active === i ? "var(--pharma)" : "var(--ink-3)", letterSpacing: "0.06em", paddingTop: 4 }}>
                    {f.num}
                  </div>
                  <div style={{ flex: 1 }}>
                    <h3 className="display display-sm" style={{ fontSize: 24 }}>{f.title}</h3>
                    <p style={{ fontSize: 15, color: "var(--ink-2)", marginTop: 8, lineHeight: 1.6 }}>{f.body}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ TESTIMONIALS ============
function Testimonials() {
  const [i, setI] = useS3(0);
  const t = [
    { quote: "Mark Maker's effervescent line transformed our throughput. The EFF-PACK 100 has been operational at 1.1 million tablets per shift, consistently — well above our original target.", name: "Ahmed Khalil", role: "Plant Director", company: "Pharco Pharmaceuticals", country: "Egypt", solution: "Complete EFF Line" },
    { quote: "What sold us was the engineering rigor — every spec they quoted held up in commissioning. The HMI and audit trail integrated cleanly into our existing QMS.", name: "Maria Santos", role: "Production Manager", company: "Hypera Pharma", country: "Brazil", solution: "EFF-PACK 4T" },
    { quote: "The granulation line is forgiving, validated, and clean. Quick changeover between products is genuinely fast — not the marketing-fast you sometimes see.", name: "Rajesh Verma", role: "VP Manufacturing", company: "Cipla Health", country: "India", solution: "RMG + FBP" },
  ];
  const cur = t[i];
  return (
    <section className="section" style={{ background: "var(--metal-3)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div className="section-label">Customer proof</div>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <svg width="48" height="36" viewBox="0 0 48 36" fill="none" style={{ marginBottom: 24 }}>
              <path d="M12 0 L0 18 L0 36 L18 36 L18 18 L8 18 L18 0 Z M42 0 L30 18 L30 36 L48 36 L48 18 L38 18 L48 0 Z" fill="var(--pharma)" opacity="0.2"/>
            </svg>
            <p className="display display-md" style={{ fontWeight: 400, lineHeight: 1.25, letterSpacing: "-0.02em" }}>
              "{cur.quote}"
            </p>
            <div style={{ marginTop: 36, paddingTop: 24, borderTop: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 16 }}>
              <div style={{ width: 56, height: 56, borderRadius: 999, background: "linear-gradient(135deg, var(--navy), var(--pharma))", color: "white", display: "grid", placeItems: "center", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18 }}>
                {cur.name.split(" ").map(n => n[0]).join("")}
              </div>
              <div>
                <div style={{ fontWeight: 500, fontSize: 15 }}>{cur.name}</div>
                <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.1em", marginTop: 2 }}>
                  {cur.role} · {cur.company}
                </div>
              </div>
              <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
                <span className="chip">{cur.solution}</span>
                <span className="chip">{cur.country}</span>
              </div>
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {t.map((other, idx) => (
              <button key={idx} onClick={() => setI(idx)}
                className="card"
                style={{
                  padding: 20, textAlign: "left",
                  background: i === idx ? "white" : "transparent",
                  borderColor: i === idx ? "var(--ink)" : "var(--line)",
                  cursor: "pointer", border: "1px solid", color: "inherit",
                  borderRadius: 10, fontFamily: "inherit",
                }}
              >
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.1em" }}>
                    {other.country}
                  </div>
                  <div className="mono" style={{ fontSize: 11, color: "var(--pharma)", letterSpacing: "0.06em" }}>
                    0{idx + 1}
                  </div>
                </div>
                <div style={{ marginTop: 8, fontWeight: 500, fontSize: 15 }}>{other.company}</div>
                <div style={{ marginTop: 4, fontSize: 13, color: "var(--ink-3)" }}>{other.solution}</div>
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ FINAL CTA ============
function FinalCTA() {
  return (
    <section style={{ background: "linear-gradient(180deg, #0B1117 0%, #102338 100%)", color: "white", padding: "120px 0", position: "relative", overflow: "hidden" }}>
      <div className="blueprint-grid dark"/>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 30% 50%, rgba(32,199,232,0.12), transparent 60%)" }}/>
      <div className="container" style={{ position: "relative" }}>
        <div className="section-label" style={{ color: "rgba(255,255,255,0.5)" }}>Project consultation</div>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <h2 className="display display-xl" style={{ color: "white", maxWidth: "16ch" }}>
              Planning a new processing or packaging line?
            </h2>
            <p className="lede" style={{ marginTop: 24, color: "rgba(255,255,255,0.72)", fontSize: 19 }}>
              Speak with Mark Maker's engineering team about machine selection, capacity studies, layout planning, and complete-line integration.
            </p>
            <div style={{ marginTop: 36, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button 
                className="btn btn-dark-solid"
                onClick={() => window.dispatchEvent(new CustomEvent("show-lead-modal"))}
              >
                Request consultation
                <svg className="arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
              </button>
              <button className="btn btn-dark">Download company profile</button>
              <button 
                className="btn btn-dark"
                onClick={() => window.location.href = "mailto:amit.pathak@stringlab.org?subject=Inquiry about Rapid Mixer Granulator"}
              >
                Email sales team
              </button>
            </div>
          </div>
          <div style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 12, padding: 32, backdropFilter: "blur(12px)" }}>
            <div className="mono" style={{ fontSize: 11, color: "#20C7E8", textTransform: "uppercase", letterSpacing: "0.14em", marginBottom: 16 }}>
              Quick contact
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <ContactRow label="Sales (India)" value="+91 79 4000 0000"/>
              <ContactRow label="Sales (Export)" value="export@markmaker.com"/>
              <ContactRow label="WhatsApp" value="Direct line · 24/7"/>
              <ContactRow label="Schedule" value="Book engineer call →"/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactRow({ label, value }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "12px 0", borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
      <span className="mono" style={{ fontSize: 11, color: "rgba(255,255,255,0.5)", textTransform: "uppercase", letterSpacing: "0.1em" }}>{label}</span>
      <span style={{ fontWeight: 500, fontSize: 14, color: "white" }}>{value}</span>
    </div>
  );
}

// ============ FOOTER ============
function Footer() {
  return (
    <footer style={{ background: "#0B1117", color: "rgba(255,255,255,0.7)", padding: "80px 0 40px" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr 1fr", gap: 48, paddingBottom: 48, borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <svg width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="white"/><path d="M 7 22 L 7 10 L 12 16 L 16 12 L 20 16 L 25 10 L 25 22" stroke="#0B1117" strokeWidth="2" fill="none"/></svg>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16, color: "white" }}>Mark Maker</div>
                <div className="mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "rgba(255,255,255,0.5)", textTransform: "uppercase" }}>Pharma Engineering</div>
              </div>
            </div>
            <p style={{ fontSize: 13, marginTop: 20, lineHeight: 1.6, maxWidth: 320 }}>
              Indigenous Indian manufacturer of effervescent processing & packaging systems, supplying pharmaceutical, nutraceutical, cosmetic, chemical, and food industries worldwide.
            </p>
          </div>
          {[
            { h: "Solutions", l: ["Effervescent", "Granulation", "Drying", "Coating", "Material Handling"] },
            { h: "Products", l: ["EFF-PACK 100", "EFF-PRO", "RMG", "Fluid Bed Dryer", "Tablet Coater"] },
            { h: "Company", l: ["About", "Projects", "Careers", "News", "Sustainability"] },
            { h: "Support", l: ["Documentation", "Service", "Training", "Spare parts", "Contact"] },
          ].map(g => (
            <div key={g.h}>
              <div className="mono" style={{ fontSize: 11, color: "white", textTransform: "uppercase", letterSpacing: "0.14em", marginBottom: 14 }}>{g.h}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {g.l.map(it => {
                  let linkHref = "#";
                  if (it === "RMG" || it === "Granulation") {
                    linkHref = "3d.html";
                  } else if (it === "EFF-PACK 100") {
                    linkHref = "3d.html";
                  }
                  return (
                    <a key={it} href={linkHref} style={{ fontSize: 13, color: "rgba(255,255,255,0.6)", textDecoration: "none" }}>
                      {it}
                    </a>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
        <div style={{ paddingTop: 28, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 20 }}>
          <div className="mono" style={{ fontSize: 11, color: "rgba(255,255,255,0.4)", textTransform: "uppercase", letterSpacing: "0.14em" }}>
            © 2026 Mark Maker Engineering Pvt. Ltd. · Made in India · Exported worldwide
          </div>
          <div style={{ display: "flex", gap: 16 }}>
            {["Privacy", "Terms", "Quality policy", "Compliance"].map(l => (
              <a key={l} href="#" className="mono" style={{ fontSize: 11, color: "rgba(255,255,255,0.5)", textTransform: "uppercase", letterSpacing: "0.1em" }}>{l}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { ProjectsMap, EngExcellence, Testimonials, FinalCTA, Footer });
