/* v2 — Two Paths contrast block + Market-entry Trap section. */

function MarketEntryTrap() {
  return (
    <section style={{ background: "var(--sand-100)", borderBottom: "1px solid var(--line)" }}>
      <Container style={{ paddingTop: 96, paddingBottom: 96 }}>
        <SectionLabel index="01 / THE TRAP" label="Market-entry reality" />
        <div className="trap-grid" style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.3fr) minmax(0, 1fr)",
          gap: 64,
          alignItems: "start",
        }}>
          <h2 style={{
            margin: 0,
            fontSize: "clamp(34px, 4.4vw, 60px)",
            lineHeight: 1.0,
            letterSpacing: "-0.03em",
            fontWeight: 500,
            color: "var(--navy-800)",
            textWrap: "balance",
          }}>
            Most F&amp;B brands start <em style={{ fontFamily: "inherit", fontStyle: "italic", color: "var(--brass-600)" }}>spending</em> before they understand the <em style={{ fontFamily: "inherit", fontStyle: "italic", color: "var(--brass-600)" }}>full cost</em>.
          </h2>
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <p style={{ margin: 0, fontSize: 18, lineHeight: 1.55, color: "var(--navy-700)", textWrap: "pretty" }}>
              Company setup is not market entry. Distributor meetings are not a launch.
              Most brands spend months and, in many cases, significant sums across
              5–8 disconnected vendors before they ever see the real picture.
            </p>
            <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: "var(--grey-700)", fontStyle: "italic" }}>
              Hidden costs appear late only when nobody mapped them early.
            </p>
          </div>
        </div>

        <div className="mono" style={{
          marginTop: 40, fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
          color: "var(--grey-500)",
        }}>
          Illustrative fragmented launch scenario
        </div>
        {/* Stat row */}
        <div className="trap-stats" style={{
          marginTop: 56,
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 0,
          border: "1px solid var(--line-strong)",
          background: "var(--sand-50)",
        }}>
          {[
            { k: "5–8", v: "Vendors typically involved", sub: "consultant · agent · lawyer · factory · designer · distributor · …" },
            { k: "12–24", v: "Months until first SKU on shelf", sub: "when nobody owns the full sequence" },
            { k: "Late", v: "When hidden costs typically appear", sub: "a significant share of budget can disappear into late-stage costs" },
            { k: "0", v: "Single operators in the room", sub: "every party answers for one slice only" },
          ].map((s, i) => (
            <div key={i} style={{
              padding: "32px 24px",
              borderRight: i === 3 ? "none" : "1px solid var(--line)",
              display: "flex", flexDirection: "column", gap: 10,
            }} className="trap-stat">
              <div className="mono" style={{ fontSize: 11, color: "var(--brass-500)", letterSpacing: "0.18em" }}>0{i + 1}</div>
              <div style={{ fontSize: 44, fontWeight: 500, letterSpacing: "-0.03em", color: "var(--navy-800)", lineHeight: 1 }}>
                {s.k}
              </div>
              <div style={{ fontSize: 14.5, fontWeight: 500, color: "var(--navy-800)" }}>{s.v}</div>
              <div style={{ fontSize: 12.5, color: "var(--grey-700)", lineHeight: 1.5 }}>{s.sub}</div>
            </div>
          ))}
        </div>

        <style>{`
          @media (max-width: 980px) {
            .trap-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
            .trap-stats { grid-template-columns: repeat(2, 1fr) !important; }
            .trap-stats > .trap-stat:nth-child(2n) { border-right: none !important; }
            .trap-stats > .trap-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
          }
          @media (max-width: 560px) {
            .trap-stats { grid-template-columns: 1fr !important; }
            .trap-stats > .trap-stat { border-right: none !important; border-bottom: 1px solid var(--line) !important; }
            .trap-stats > .trap-stat:last-child { border-bottom: none !important; }
          }
        `}</style>
      </Container>
    </section>
  );
}

function TwoPaths({ onScrollTo }) {
  const left = [
    "Company setup",
    "Bank & legal",
    "Regulatory agent",
    "Label & packaging work",
    "Co-packer search",
    "Distributor meetings",
    "Listing + promo fees",
    "Hidden costs",
    "No single owner",
  ];
  const right = [
    "Product review",
    "UAE Launch Map (full roadmap + budget)",
    "Production & co-packing route",
    "Label, claims & compliance readiness",
    "Commercial launch plan",
    "UAE launch",
    "GCC scale",
  ];

  return (
    <section style={{ background: "var(--navy-900)", color: "var(--sand-100)", borderBottom: "1px solid var(--navy-700)" }}>
      <Container style={{ paddingTop: 96, paddingBottom: 96 }}>
        <SectionLabel index="02 / TWO PATHS" label="The choice in front of you" tone="light" />
        <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(34px, 4.4vw, 60px)",
            lineHeight: 1.0,
            letterSpacing: "-0.03em",
            fontWeight: 500,
            color: "var(--sand-100)",
            textWrap: "balance",
          }}>
            You can spend two years connecting vendors — or start with <em style={{ fontFamily: "inherit", fontStyle: "italic", color: "var(--brass-400)" }}>one clear operating path</em>.
          </h2>
          <p style={{ margin: 0, fontSize: 17, color: "var(--sand-300)", lineHeight: 1.55, textWrap: "pretty" }}>
            Most providers sell one step. We map the whole route — then we operate it
            with you, in sequence, with a budget agreed before you spend a dirham.
          </p>
        </div>

        <div className="paths" style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 0,
          border: "1px solid var(--navy-600)",
        }}>
          {/* LEFT path — fragmented */}
          <div style={{
            background: "linear-gradient(180deg, #1A0E0E 0%, var(--navy-900) 100%)",
            padding: "36px 36px 40px",
            borderRight: "1px solid var(--navy-600)",
            position: "relative",
          }} className="path-col path-bad">
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24 }}>
              <span style={{
                width: 32, height: 32, background: "#7A2A22", color: "var(--sand-100)",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontFamily: "JetBrains Mono, monospace", fontSize: 13, fontWeight: 600,
              }}>A</span>
              <div>
                <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.18em", color: "#D87A6D", textTransform: "uppercase" }}>
                  Path A
                </div>
                <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.015em", color: "var(--sand-100)" }}>
                  The fragmented path
                </div>
              </div>
            </div>

            <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 0 }}>
              {left.map((step, i) => (
                <li key={step} className="path-step bad" style={{
                  display: "grid",
                  gridTemplateColumns: "36px 1fr 18px",
                  alignItems: "center",
                  padding: "14px 0",
                  borderTop: i === 0 ? "1px solid rgba(216,122,109,0.18)" : "1px dashed rgba(216,122,109,0.18)",
                  color: "var(--sand-200)",
                }}>
                  <span className="mono" style={{ fontSize: 11, color: "#D87A6D" }}>0{i + 1}</span>
                  <span style={{ fontSize: 15.5 }}>{step}</span>
                  <span style={{ color: "#D87A6D", opacity: 0.7 }}>
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                      <path d="M3 3L11 11M11 3L3 11" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/>
                    </svg>
                  </span>
                </li>
              ))}
            </ol>

            <div style={{
              marginTop: 28,
              padding: "16px 18px",
              background: "rgba(122,42,34,0.35)",
              border: "1px solid #7A2A22",
              color: "var(--sand-100)",
              fontSize: 13.5,
              lineHeight: 1.5,
            }}>
              <span className="mono" style={{ fontSize: 10.5, letterSpacing: "0.16em", color: "#E6A299", textTransform: "uppercase", display: "block", marginBottom: 4 }}>
                Result
              </span>
              5–8 vendors · 12–24 months · hidden costs · no single operator.
            </div>
          </div>

          {/* RIGHT path — 360hub-ae */}
          <div style={{
            background: "linear-gradient(180deg, #0E1A14 0%, var(--navy-900) 100%)",
            padding: "36px 36px 40px",
            position: "relative",
          }} className="path-col path-good">
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24 }}>
              <span style={{
                width: 32, height: 32, background: "var(--brass-500)", color: "var(--navy-900)",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontFamily: "JetBrains Mono, monospace", fontSize: 13, fontWeight: 600,
              }}>B</span>
              <div>
                <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.18em", color: "var(--brass-400)", textTransform: "uppercase" }}>
                  Path B
                </div>
                <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.015em", color: "var(--sand-100)" }}>
                  The 360hub-ae path
                </div>
              </div>
            </div>

            <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 0 }}>
              {right.map((step, i) => (
                <li key={step} className="path-step good" style={{
                  display: "grid",
                  gridTemplateColumns: "36px 1fr 18px",
                  alignItems: "center",
                  padding: "14px 0",
                  borderTop: i === 0 ? "1px solid rgba(201,164,92,0.22)" : "1px dashed rgba(201,164,92,0.18)",
                  color: "var(--sand-100)",
                }}>
                  <span className="mono" style={{ fontSize: 11, color: "var(--brass-400)" }}>0{i + 1}</span>
                  <span style={{ fontSize: 15.5, fontWeight: 500 }}>{step}</span>
                  <span style={{ color: "var(--brass-400)" }}>
                    <IconCheck />
                  </span>
                </li>
              ))}
            </ol>

            <div style={{
              marginTop: 28,
              padding: "16px 18px",
              background: "rgba(184,138,68,0.14)",
              border: "1px solid var(--brass-500)",
              color: "var(--sand-100)",
              fontSize: 13.5,
              lineHeight: 1.5,
            }}>
              <span className="mono" style={{ fontSize: 10.5, letterSpacing: "0.16em", color: "var(--brass-400)", textTransform: "uppercase", display: "block", marginBottom: 4 }}>
                Result
              </span>
              One operating partner. One sequence. Clear budget before you spend a single dirham.
            </div>
          </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")}>Send product brief</Btn>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .paths { grid-template-columns: 1fr !important; }
            .paths .path-col { border-right: none !important; }
            .paths .path-good { border-top: 1px solid var(--navy-600); }
          }
        `}</style>
      </Container>
    </section>
  );
}

Object.assign(window, { MarketEntryTrap, TwoPaths });
