/* v2 Hero — Launch Map angle, 3 CTAs, route-to-launch workflow. */

function Hero({ onScrollTo, onPickScenario }) {
  const flow = [
    "Product / Formula",
    "UAE Launch Map",
    "Production Route",
    "Compliance & Label",
    "Commercial Launch",
    "GCC Scale",
  ];

  return (
    <section id="top" style={{ background: "var(--sand-100)", borderBottom: "1px solid var(--line)", position: "relative" }}>
      <Container style={{ paddingTop: 72, paddingBottom: 64, position: "relative" }}>
        <div className="hero-grid" style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.15fr) minmax(0, 1fr)",
          gap: 80,
          alignItems: "start",
        }}>
          {/* LEFT: copy */}
          <div>
            <div className="mono" style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
              color: "var(--grey-500)",
              border: "1px solid var(--line-strong)",
              padding: "8px 12px",
              marginBottom: 32,
            }}>
              <span style={{ width: 6, height: 6, background: "var(--brass-500)" }}></span>
              UAE · DUBAI · GCC
              <span style={{ width: 1, height: 10, background: "var(--line-strong)" }}></span>
              EST. 2024
            </div>

            <h1 style={{
              fontSize: "clamp(40px, 5.4vw, 76px)",
              lineHeight: 0.98,
              letterSpacing: "-0.035em",
              fontWeight: 500,
              margin: 0,
              color: "var(--navy-800)",
              textWrap: "balance",
            }}>
              Enter the UAE F&amp;B market with the <em style={{ fontFamily: "inherit", fontStyle: "italic", color: "var(--brass-600)" }}>full path clear</em> from day one.
            </h1>

            <p style={{
              marginTop: 32,
              fontSize: 18,
              lineHeight: 1.5,
              color: "var(--navy-700)",
              maxWidth: 620,
              textWrap: "pretty",
            }}>
              360hub-ae helps F&amp;B brands map and execute the real UAE/GCC
              market-entry path — from product or formula to production route,
              label &amp; compliance readiness, commercial launch and regional
              scale — before money is wasted across disconnected vendors.
            </p>

            <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 36 }}>
              <Btn variant="primary" onClick={() => onScrollTo("launch-map")}>Request UAE Launch Map</Btn>
              <Btn variant="ghost" onClick={() => onPickScenario("brief")}>Send product brief</Btn>
              <Btn variant="brass" href={WA_LINK} icon={false}>WhatsApp an Operator</Btn>
            </div>

            <p className="mono" style={{
              marginTop: 24,
              fontSize: 11.5,
              letterSpacing: "0.08em",
              color: "var(--grey-500)",
              textTransform: "uppercase",
              maxWidth: 620,
              lineHeight: 1.7,
            }}>
              <span style={{ color: "var(--navy-700)" }}>Company setup is not market entry.</span>
              <span style={{ margin: "0 8px", color: "var(--grey-400)" }}>·</span>
              <span style={{ color: "var(--navy-700)" }}>Distributor meetings are not a launch.</span>
            </p>
          </div>

          {/* RIGHT: contact card + workflow */}
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <ContactRail />
            <WorkflowDiagram flow={flow} />
          </div>
        </div>
      </Container>

      <TrustStrip />

      <style>{`
        @media (max-width: 980px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
      `}</style>
    </section>
  );
}

function ContactRail() {
  return (
    <div style={{
      background: "var(--navy-800)",
      color: "var(--sand-100)",
      padding: "20px 22px",
      display: "grid",
      gridTemplateColumns: "1fr auto",
      alignItems: "center",
      gap: 16,
    }}>
      <div>
        <div className="mono" style={{
          fontSize: 10.5, letterSpacing: "0.18em", textTransform: "uppercase",
          color: "var(--brass-400)", marginBottom: 6,
        }}>
          Direct line · UAE
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
          <a href={`tel:${PHONE_TEL}`} style={{ color: "var(--sand-100)", textDecoration: "none", fontSize: 20, fontWeight: 500, letterSpacing: "-0.01em" }}>
            {PHONE}
          </a>
          <span style={{ opacity: 0.4 }}>·</span>
          <a href={`mailto:${EMAIL}`} style={{ color: "var(--sand-300)", textDecoration: "none", fontSize: 14 }}>
            {EMAIL}
          </a>
        </div>
      </div>
      <a href={WA_LINK} target="_blank" rel="noreferrer" style={{
        background: "var(--brass-500)", color: "var(--navy-900)",
        textDecoration: "none", padding: "10px 14px",
        display: "inline-flex", alignItems: "center", gap: 8,
        fontSize: 13, fontWeight: 600,
      }}>
        <IconChat /> WhatsApp
      </a>
    </div>
  );
}

function WorkflowDiagram({ flow }) {
  return (
    <div style={{
      border: "1px solid var(--line-strong)",
      background: "var(--sand-50)",
      padding: 24,
    }}>
      <div className="mono" style={{
        fontSize: 10.5, letterSpacing: "0.18em", textTransform: "uppercase",
        color: "var(--grey-500)", marginBottom: 18,
        display: "flex", justifyContent: "space-between",
      }}>
        <span>One operating path</span>
        <span>v.02</span>
      </div>
      <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 0 }}>
        {flow.map((step, i) => (
          <li key={step} style={{
            display: "grid",
            gridTemplateColumns: "44px 1fr auto",
            alignItems: "center",
            padding: "14px 0",
            borderTop: i === 0 ? "none" : "1px dashed var(--line)",
          }}>
            <span className="mono" style={{ fontSize: 11, color: "var(--brass-500)" }}>
              0{i + 1}
            </span>
            <span style={{ fontSize: 16, fontWeight: 500, color: "var(--navy-800)", letterSpacing: "-0.01em" }}>
              {step}
            </span>
            <span style={{
              width: 28, height: 1, background: "var(--navy-700)",
              opacity: i === flow.length - 1 ? 0 : 1,
            }}></span>
          </li>
        ))}
      </ol>
    </div>
  );
}

function TrustStrip() {
  const items = ["Launch Map", "Production", "Compliance", "Commercial", "GCC scale"];
  return (
    <div style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", background: "var(--sand-200)" }}>
      <Container style={{ display: "flex", flexWrap: "wrap", gap: 8, justifyContent: "space-between", padding: "18px 32px" }}>
        {items.map((t) => (
          <div key={t} className="mono" style={{
            fontSize: 11.5, letterSpacing: "0.18em", textTransform: "uppercase",
            color: "var(--navy-700)", display: "flex", alignItems: "center", gap: 10,
          }}>
            <span style={{ width: 6, height: 6, background: "var(--brass-500)" }}></span>
            {t}
          </div>
        ))}
      </Container>
    </div>
  );
}

Object.assign(window, { Hero });