/* v2 — UAE Launch Map lead magnet block + Partnership Model. */

function LaunchMapSection({ onScrollTo }) {
  const deliverables = [
    { n: "01", t: "Product & stage analysis", d: "Where your product stands today: formula, prototype, existing SKU, export status." },
    { n: "02", t: "Best market-entry route", d: "Import · co-packing · local production · hybrid — chosen for your category, margin, and timeline." },
    { n: "03", t: "Full sequence of steps", d: "Every step in correct order, with dependencies, owners, and realistic durations." },
    { n: "04", t: "Realistic budget map", d: "What you actually spend — including where hidden costs typically appear." },
    { n: "05", t: "Mandatory vs deferrable", d: "What must happen before launch, and what can wait until traction." },
    { n: "06", t: "First commercial channel", d: "A recommendation on where to land first: retail, HoReCa, or distributor." },
    { n: "07", t: "KSA & GCC scale logic", d: "How the UAE launch is structured in a way that makes later KSA and GCC expansion faster and cleaner." },
  ];

  return (
    <section id="launch-map" style={{
      background: "linear-gradient(180deg, var(--sand-200) 0%, var(--sand-300) 100%)",
      borderBottom: "1px solid var(--line)",
      position: "relative",
      overflow: "hidden",
    }}>
      <Container style={{ paddingTop: 96, paddingBottom: 96, position: "relative" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 32, gap: 16, flexWrap: "wrap" }}>
          <SectionLabel index="03 / LEAD MAGNET" label="UAE Launch Map" />
          <div className="mono" style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
            color: "var(--brass-600)",
            border: "1px solid var(--brass-500)",
            background: "rgba(184,138,68,0.10)",
            padding: "8px 12px",
          }}>
            <span style={{ width: 6, height: 6, background: "var(--brass-500)" }}></span>
            The first step that changes everything
          </div>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.1fr) minmax(0, 1fr)",
          gap: 56,
          alignItems: "end",
          marginBottom: 56,
        }} className="two-col">
          <h2 style={{
            margin: 0,
            fontSize: "clamp(36px, 4.6vw, 64px)",
            lineHeight: 0.98,
            letterSpacing: "-0.03em",
            fontWeight: 500,
            color: "var(--navy-800)",
            textWrap: "balance",
          }}>
            Your UAE F&amp;B <em style={{ fontFamily: "inherit", fontStyle: "italic", color: "var(--brass-600)" }}>Launch Map</em> — the first step that changes everything.
          </h2>
          <p style={{ margin: 0, fontSize: 18, lineHeight: 1.55, color: "var(--navy-700)", textWrap: "pretty" }}>
            Before any company is opened, any distributor is met, or any production
            invoice is signed — you get a single document that shows the real path,
            real sequence, and real cost. Your product deserves a market-entry plan
            before it gets a listing invoice.
          </p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.4fr) minmax(0, 1fr)",
          gap: 0,
          border: "1px solid var(--line-strong)",
          background: "var(--sand-100)",
        }} className="lm-grid">
          {/* Deliverables list */}
          <div style={{ borderRight: "1px solid var(--line)" }} className="lm-deliv">
            <div className="mono" style={{
              padding: "16px 24px",
              fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
              color: "var(--grey-500)",
              borderBottom: "1px solid var(--line)",
              display: "flex", justifyContent: "space-between",
            }}>
              <span>What you receive</span>
              <span>07 deliverables</span>
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
              {deliverables.map((d, i) => (
                <li key={d.n} style={{
                  padding: "20px 24px",
                  display: "grid",
                  gridTemplateColumns: "48px 1fr",
                  alignItems: "start",
                  gap: 16,
                  borderTop: i === 0 ? "none" : "1px dashed var(--line)",
                }}>
                  <span className="mono" style={{
                    fontSize: 11, color: "var(--brass-500)", letterSpacing: "0.16em",
                    paddingTop: 4,
                  }}>
                    {d.n}
                  </span>
                  <div>
                    <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: "-0.01em", color: "var(--navy-800)", marginBottom: 4 }}>
                      {d.t}
                    </div>
                    <div style={{ fontSize: 14, color: "var(--navy-700)", lineHeight: 1.55 }}>
                      {d.d}
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          </div>

          {/* CTA card */}
          <div style={{
            background: "var(--navy-800)",
            color: "var(--sand-100)",
            padding: "32px 32px 36px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            gap: 32,
            minHeight: 520,
          }}>
            <div>
              <div className="mono" style={{
                fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
                color: "var(--brass-400)", marginBottom: 18,
              }}>
                Start here
              </div>
              <h3 style={{
                margin: 0,
                fontSize: 30,
                fontWeight: 500,
                letterSpacing: "-0.02em",
                lineHeight: 1.1,
                color: "var(--sand-100)",
                textWrap: "balance",
              }}>
                Request your UAE Launch Map before you spend on anything else.
              </h3>
              <p style={{
                marginTop: 18, fontSize: 15, lineHeight: 1.55, color: "var(--sand-300)",
              }}>
                Submit your product brief → we review it within 1 business day
                and return a structured UAE Launch Map proposal with timeline,
                sequence, budget logic and recommended next steps.
              </p>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <Btn variant="brass" onClick={() => onScrollTo("contact")}>Request UAE Launch Map</Btn>
              <Btn variant="ghostLight" href={WA_LINK}>WhatsApp an Operator</Btn>
              <div className="mono" style={{
                marginTop: 8,
                fontSize: 10.5, letterSpacing: "0.16em", textTransform: "uppercase",
                color: "var(--sand-300)", lineHeight: 1.6,
              }}>
                Response within 1 UAE business day<br/>
                NDA available on request
              </div>
            </div>
          </div>
        </div>

        <p style={{
          marginTop: 32, fontSize: 14, color: "var(--navy-700)", maxWidth: 720,
          fontStyle: "italic",
        }}>
          We do not profit from your confusion. We build clarity before execution.
        </p>

        <style>{`
          @media (max-width: 900px) {
            .lm-grid { grid-template-columns: 1fr !important; }
            .lm-grid .lm-deliv { border-right: none !important; border-bottom: 1px solid var(--line); }
          }
        `}</style>
      </Container>
    </section>
  );
}

function PartnershipModelSection({ onScrollTo }) {
  return (
    <section style={{ background: "var(--navy-800)", color: "var(--sand-100)", borderBottom: "1px solid var(--navy-600)" }}>
      <Container style={{ paddingTop: 96, paddingBottom: 96 }}>
        <SectionLabel index="06 / PARTNERSHIP MODEL" label="How we make money" tone="light" />
        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.3fr) minmax(0, 1fr)",
          gap: 64,
          alignItems: "end",
          marginBottom: 56,
        }} className="two-col">
          <h2 style={{
            margin: 0,
            fontSize: "clamp(34px, 4.4vw, 60px)",
            lineHeight: 1.0,
            letterSpacing: "-0.03em",
            fontWeight: 500,
            color: "var(--sand-100)",
            textWrap: "balance",
          }}>
            We are not built to win on your <em style={{ fontFamily: "inherit", fontStyle: "italic", color: "var(--brass-400)" }}>first invoice</em>. We are built to grow with your <em style={{ fontFamily: "inherit", fontStyle: "italic", color: "var(--brass-400)" }}>product</em>.
          </h2>
          <p style={{ margin: 0, fontSize: 17, color: "var(--sand-300)", lineHeight: 1.55, textWrap: "pretty" }}>
            Our model is not built on confusion. Clarity first — Launch Map.
            Execution next — production, compliance, commercial. Scale last —
            UAE to KSA and the wider GCC, growing alongside your brand.
          </p>
        </div>

        <div className="model-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 0,
          border: "1px solid var(--navy-600)",
        }}>
          {[
            { n: "01", t: "Clarity", d: "Launch Map first. The full path, real cost, real sequence — before any execution begins.", tag: "Phase 01" },
            { n: "02", t: "Execution", d: "We operate the path: production, co-packing, compliance, label, commercial readiness — under one operator.", tag: "Phase 02" },
            { n: "03", t: "Scale", d: "We grow with your product across UAE and GCC. Our success is tied to your launch holding up over years.", tag: "Phase 03" },
          ].map((p, i) => (
            <div key={p.n} style={{
              padding: "32px 28px 36px",
              borderRight: i === 2 ? "none" : "1px solid var(--navy-600)",
              display: "flex", flexDirection: "column", gap: 16,
              minHeight: 260,
            }} className="model-card">
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--brass-400)", letterSpacing: "0.18em" }}>{p.n}</span>
                <span className="mono" style={{
                  fontSize: 10.5, letterSpacing: "0.16em", textTransform: "uppercase",
                  color: "var(--sand-300)", border: "1px solid var(--navy-500)", padding: "4px 8px",
                }}>{p.tag}</span>
              </div>
              <h3 style={{ margin: 0, fontSize: 32, fontWeight: 500, letterSpacing: "-0.025em", color: "var(--sand-100)" }}>
                {p.t}
              </h3>
              <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: "var(--sand-300)" }}>{p.d}</p>
            </div>
          ))}
        </div>

        <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 36 }}>
          <Btn variant="brass" onClick={() => onScrollTo("launch-map")}>Request UAE Launch Map</Btn>
          <Btn variant="ghostLight" onClick={() => onScrollTo("contact")}>Request partnership call</Btn>
        </div>

        <style>{`
          @media (max-width: 900px) {
            .model-grid { grid-template-columns: 1fr !important; }
            .model-grid .model-card { border-right: none !important; border-bottom: 1px solid var(--navy-600); }
            .model-grid .model-card:last-child { border-bottom: none !important; }
          }
        `}</style>
      </Container>
    </section>
  );
}

Object.assign(window, { LaunchMapSection, PartnershipModelSection });