/* v2 sections — 4 pillars, audience, Why UAE (4), comparison, operating experience, final CTA. */

function ExecutionPlatformSection() {
  const services = [
    {
      n: "01",
      tag: "Strategy",
      title: "Market-entry clarity & budget map",
      items: [
        "Full UAE launch path & sequence",
        "Realistic budget — including hidden costs",
        "Mandatory vs deferrable steps",
        "Channel-entry logic",
        "Launch sequencing",
      ],
    },
    {
      n: "02",
      tag: "Operations",
      title: "Production & co-packing pathway",
      items: [
        "Formula → pilot run",
        "Format feasibility",
        "MOQ & batch planning",
        "Co-packing route & supplier coordination",
        "Commercial scale-up",
      ],
    },
    {
      n: "03",
      tag: "Compliance",
      title: "Label, claims & compliance readiness",
      items: [
        "English / Arabic label readiness",
        "Claims & positioning review",
        "Product documentation",
        "Municipality registration workflow",
      ],
    },
    {
      n: "04",
      tag: "Commercial",
      title: "Shelf & buyer readiness",
      items: [
        "Pricing & margin structure",
        "Buyer-readiness assets",
        "Retail-ready packaging logic",
        "Retail / HoReCa / distributor route",
        "UAE launch follow-through",
        "KSA & GCC expansion logic",
      ],
    },
  ];

  return (
    <section id="what" style={{ background: "var(--navy-800)", color: "var(--sand-100)", borderBottom: "1px solid var(--navy-600)" }}>
      <Container style={{ paddingTop: 96, paddingBottom: 96 }}>
        <SectionLabel index="04 / PLATFORM" label="One coordinated operator" tone="light" />
        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.2fr) minmax(0, 1fr)",
          gap: 64,
          marginBottom: 64,
        }} className="two-col-svc">
          <h2 style={{
            margin: 0,
            fontSize: "clamp(34px, 4.4vw, 60px)",
            lineHeight: 1.0,
            letterSpacing: "-0.03em",
            fontWeight: 500,
            color: "var(--sand-100)",
            textWrap: "balance",
          }}>
            From product readiness to GCC scale — under <em style={{ fontFamily: "inherit", fontStyle: "italic", color: "var(--brass-400)" }}>one operator</em>.
          </h2>
          <p style={{ margin: 0, fontSize: 18, lineHeight: 1.5, color: "var(--sand-300)", alignSelf: "end" }}>
            Four operating pillars, one accountable team. No vendor stacks,
            no broken handoffs — every step belongs to someone you can call.
          </p>
        </div>

        <div className="svc4" style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, 1fr)",
          gap: 0,
          border: "1px solid var(--navy-600)",
        }}>
          {services.map((s, i) => (
            <div key={s.n} style={{
              padding: "32px 32px 36px",
              borderRight: (i % 2 === 0) ? "1px solid var(--navy-600)" : "none",
              borderTop: i >= 2 ? "1px solid var(--navy-600)" : "none",
              minHeight: 280,
              display: "flex", flexDirection: "column", gap: 20,
            }} className="svc-card">
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--brass-400)", letterSpacing: "0.18em" }}>{s.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",
                }}>{s.tag}</span>
              </div>
              <h3 style={{
                margin: 0, fontSize: 28, fontWeight: 500, letterSpacing: "-0.02em",
                lineHeight: 1.1, color: "var(--sand-100)", textWrap: "balance",
              }}>{s.title}</h3>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                {s.items.map((it) => (
                  <li key={it} style={{
                    fontSize: 14.5, color: "var(--sand-300)",
                    display: "flex", gap: 10, alignItems: "baseline",
                  }}>
                    <span style={{ color: "var(--brass-400)", fontSize: 10 }}>—</span>
                    <span>{it}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

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

function AudienceSection() {
  const aud = [
    { tag: "International F&B brands", body: "Enter the UAE — or use it as a regional launch base for KSA and GCC.", cta: "Discuss UAE market entry" },
    { tag: "Manufacturers", body: "Find a structured UAE co-packing, localization, or export-oriented production path.", cta: "Explore production pathway" },
    { tag: "Private-label & innovation teams", body: "Develop SKUs, local formats, pilot batches, or regional product adaptations.", cta: "Start product review" },
    { tag: "Founders with serious products", body: "Move from formula or prototype to a real launch — without losing 18 months to vendor stacks.", cta: "Validate launch readiness" },
    { tag: "Distributors & commercial partners", body: "Find production-backed brands ready for UAE/GCC channels.", cta: "Request partnership call" },
  ];
  return (
    <section id="who" style={{ background: "var(--sand-200)", borderBottom: "1px solid var(--line)" }}>
      <Container style={{ paddingTop: 96, paddingBottom: 96 }}>
        <SectionLabel index="05 / WHO WE HELP" label="Built for serious F&B projects" />
        <h2 style={{
          margin: "0 0 56px",
          fontSize: "clamp(32px, 4vw, 56px)",
          lineHeight: 1.0,
          letterSpacing: "-0.03em",
          fontWeight: 500,
          color: "var(--navy-800)",
          maxWidth: 1100,
          textWrap: "balance",
        }}>
          For brands and operators with <em style={{ fontFamily: "inherit", fontStyle: "italic", color: "var(--brass-600)" }}>serious intent</em>.
        </h2>
        <div className="aud-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 0,
          border: "1px solid var(--line-strong)",
          background: "var(--sand-100)",
        }}>
          {aud.map((a, i) => (
            <div key={a.tag} style={{
              padding: "32px 28px 36px",
              borderRight: ((i + 1) % 3 === 0) ? "none" : "1px solid var(--line)",
              borderTop: i >= 3 ? "1px solid var(--line)" : "none",
              display: "flex", flexDirection: "column", gap: 18,
              minHeight: 260,
            }} className="aud-card">
              <div className="mono" style={{
                fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
                color: "var(--brass-500)",
              }}>0{i + 1}</div>
              <h3 style={{
                margin: 0, fontSize: 22, fontWeight: 500, letterSpacing: "-0.015em",
                color: "var(--navy-800)", lineHeight: 1.15, textWrap: "balance",
              }}>{a.tag}</h3>
              <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: "var(--navy-700)", flex: 1 }}>
                {a.body}
              </p>
              <a onClick={(e) => { e.preventDefault(); document.getElementById("contact")?.scrollIntoView({ behavior: "smooth" }); }} href="#contact"
                style={{
                  fontSize: 14, fontWeight: 500, color: "var(--navy-800)",
                  display: "inline-flex", alignItems: "center", gap: 8,
                  textDecoration: "none",
                  borderTop: "1px solid var(--line)",
                  paddingTop: 16,
                }}>
                {a.cta} <IconArrow />
              </a>
            </div>
          ))}
        </div>
        <style>{`
          @media (max-width: 980px) {
            .aud-grid { grid-template-columns: repeat(2, 1fr) !important; }
            .aud-grid .aud-card { border-right: 1px solid var(--line); border-top: 1px solid var(--line); }
            .aud-grid .aud-card:nth-child(2n) { border-right: none !important; }
            .aud-grid .aud-card:nth-child(-n+2) { border-top: none !important; }
          }
          @media (max-width: 560px) {
            .aud-grid { grid-template-columns: 1fr !important; }
            .aud-grid .aud-card { border-right: none !important; border-top: 1px solid var(--line) !important; }
            .aud-grid .aud-card:first-child { border-top: none !important; }
          }
        `}</style>
      </Container>
    </section>
  );
}

function WhyUAESection() {
  const items = [
    { n: "01", t: "Regional gateway", d: "The UAE opens GCC and international trade routes for F&B brands." },
    { n: "02", t: "Commercial credibility", d: "A clean UAE launch becomes proof for regional buyers and partners." },
    { n: "03", t: "Compliance discipline", d: "Structured entry requires documentation, packaging and regulatory discipline — structured in a way that makes later KSA and GCC expansion faster and cleaner." },
    { n: "04", t: "Production & export base", d: "For some brands, the UAE becomes a regional co-packing or export-oriented production base." },
  ];
  return (
    <section id="why-uae" style={{ background: "var(--sand-300)", borderBottom: "1px solid var(--line)" }}>
      <Container style={{ paddingTop: 96, paddingBottom: 96 }}>
        <SectionLabel index="07 / WHY UAE" label="Operating base" />
        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
          gap: 64,
          marginBottom: 56,
        }} className="two-col">
          <h2 style={{
            margin: 0,
            fontSize: "clamp(32px, 4vw, 56px)",
            lineHeight: 1.0,
            letterSpacing: "-0.03em",
            fontWeight: 500,
            color: "var(--navy-800)",
            textWrap: "balance",
          }}>
            More than a destination market — a regional <em style={{ fontFamily: "inherit", fontStyle: "italic", color: "var(--brass-600)" }}>operating base</em>.
          </h2>
          <p style={{ margin: 0, fontSize: 18, lineHeight: 1.55, color: "var(--navy-700)", alignSelf: "end", textWrap: "pretty" }}>
            Used correctly, the UAE is a launchpad to KSA and the wider GCC — with
            compliance and commercial structure built in a way that makes later
            regional expansion faster and cleaner.
          </p>
        </div>
        <div className="why-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 0,
          background: "var(--sand-100)",
          border: "1px solid var(--line-strong)",
        }}>
          {items.map((it, i) => (
            <div key={it.n} style={{
              padding: "28px 24px 32px",
              borderRight: i === items.length - 1 ? "none" : "1px solid var(--line)",
              display: "flex", flexDirection: "column", gap: 16,
              minHeight: 220,
            }}>
              <span className="mono" style={{ fontSize: 11, color: "var(--brass-500)", letterSpacing: "0.18em" }}>{it.n}</span>
              <h3 style={{ margin: 0, fontSize: 22, fontWeight: 500, letterSpacing: "-0.015em", color: "var(--navy-800)" }}>
                {it.t}
              </h3>
              <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: "var(--navy-700)" }}>{it.d}</p>
            </div>
          ))}
        </div>

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

function WhyUsSection() {
  const rows = [
    ["Strategy",         "Slide-based advice",          "Production only",              "Clarity-first Launch Map + full path"],
    ["Production",       "Limited ownership",           "Limited market-entry support", "Production + commercial + compliance coordinated through one accountable operating partner"],
    ["Hidden costs",     "Often surface later",         "Often surface later",          "Mapped early, before any spend"],
    ["UAE F&B workflow", "May not understand it",       "May not own launch",           "Built around UAE F&B operating context"],
    ["Incentives",       "Paid once on the brief",      "Paid once on the order",       "Grow with your product — UAE to GCC"],
  ];
  return (
    <section style={{ background: "var(--navy-900)", color: "var(--sand-100)", borderBottom: "1px solid var(--navy-600)" }}>
      <Container style={{ paddingTop: 96, paddingBottom: 96 }}>
        <SectionLabel index="08 / WHY 360HUB-AE" label="Operator, not vendor" tone="light" />
        <h2 style={{
          margin: "0 0 56px",
          fontSize: "clamp(32px, 4vw, 56px)",
          lineHeight: 1.0,
          letterSpacing: "-0.03em",
          fontWeight: 500,
          color: "var(--sand-100)",
          maxWidth: 1100,
          textWrap: "balance",
        }}>
          Not advice only. Not production only. <em style={{ color: "var(--brass-400)", fontStyle: "italic", fontFamily: "inherit" }}>Execution across the full launch path.</em>
        </h2>

        <div className="compare-wrap" style={{ overflowX: "auto", border: "1px solid var(--navy-600)" }}>
          <table style={{
            width: "100%", borderCollapse: "collapse", minWidth: 720,
            color: "var(--sand-100)", fontSize: 14.5,
          }}>
            <thead>
              <tr>
                <th style={thHead}></th>
                <th style={thHead}>Typical consultant</th>
                <th style={thHead}>Typical factory</th>
                <th style={{ ...thHead, background: "var(--brass-500)", color: "var(--navy-900)" }}>360hub-ae</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row, i) => (
                <tr key={i}>
                  <td style={tdLabel}>{row[0]}</td>
                  <td style={tdCell}>{row[1]}</td>
                  <td style={tdCell}>{row[2]}</td>
                  <td style={{ ...tdCell, color: "var(--sand-100)", background: "rgba(184,138,68,0.08)", borderLeft: "1px solid var(--brass-500)" }}>
                    <span style={{ display: "inline-flex", alignItems: "baseline", gap: 8 }}>
                      <span style={{ color: "var(--brass-400)" }}>●</span> {row[3]}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Container>
    </section>
  );
}

const thHead = {
  textAlign: "left", padding: "20px 22px",
  fontFamily: "JetBrains Mono, monospace", fontSize: 11,
  letterSpacing: "0.18em", textTransform: "uppercase",
  color: "var(--sand-200)", background: "var(--navy-800)",
  borderBottom: "1px solid var(--navy-600)", fontWeight: 500,
};
const tdLabel = {
  padding: "20px 22px", fontFamily: "JetBrains Mono, monospace",
  fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
  color: "var(--brass-400)", borderBottom: "1px solid var(--navy-600)",
  width: 200, verticalAlign: "top",
};
const tdCell = {
  padding: "20px 22px", color: "var(--sand-200)",
  borderBottom: "1px solid var(--navy-600)",
  borderLeft: "1px solid var(--navy-600)",
  verticalAlign: "top", lineHeight: 1.45,
};

function CredibilitySection() {
  const questions = [
    "Should you open a UAE company now — or later?",
    "Which route is right for you: import, co-packing, local production or hybrid?",
    "What documentation, label and claims work is actually required?",
    "Where do hidden costs usually appear?",
    "Which channel should come first — retail, HoReCa or distributor?",
    "What realistic budget is needed before the first serious market test?",
    "How should you prepare for KSA and wider GCC expansion?",
  ];
  const tags = ["Compliance-aware", "Production-oriented", "Commercially practical", "UAE-based", "GCC-ready", "Execution-led"];
  return (
    <section style={{ background: "var(--sand-100)", borderBottom: "1px solid var(--line)" }}>
      <Container style={{ paddingTop: 96, paddingBottom: 96 }}>
        <SectionLabel index="09 / WHAT YOU WILL KNOW" label="Before you commit any capital" />
        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.1fr) minmax(0, 1fr)",
          gap: 80,
        }} className="two-col">
          <div>
            <h2 style={{
              margin: 0,
              fontSize: "clamp(32px, 4vw, 56px)",
              lineHeight: 1.0,
              letterSpacing: "-0.03em",
              fontWeight: 500,
              color: "var(--navy-800)",
              textWrap: "balance",
            }}>
              What you will know <em style={{ fontFamily: "inherit", fontStyle: "italic", color: "var(--brass-600)" }}>before</em> you commit any capital.
            </h2>
            <p style={{
              marginTop: 28, fontSize: 18, lineHeight: 1.55, color: "var(--navy-700)", maxWidth: 580,
              textWrap: "pretty",
            }}>
              The UAE Launch Map answers the questions that decide whether your
              project succeeds or quietly drifts — long before the first invoice
              is signed.
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 32 }}>
              {tags.map((t) => (
                <span key={t} className="mono" style={{
                  fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
                  padding: "8px 12px",
                  border: "1px solid var(--line-strong)",
                  color: "var(--navy-700)",
                  background: "var(--sand-50)",
                }}>{t}</span>
              ))}
            </div>
          </div>
          <div style={{
            border: "1px solid var(--line-strong)",
            background: "var(--sand-50)",
            padding: "8px",
          }}>
            <div className="mono" style={{
              fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
              color: "var(--grey-500)", padding: "12px 14px",
              borderBottom: "1px solid var(--line)",
              display: "flex", justifyContent: "space-between",
            }}>
              <span>Questions answered</span>
              <span>07 / 07</span>
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
              {questions.map((q, i) => (
                <li key={q} style={{
                  padding: "16px 14px",
                  borderTop: i === 0 ? "none" : "1px dashed var(--line)",
                  display: "grid",
                  gridTemplateColumns: "32px 1fr auto",
                  alignItems: "start",
                  gap: 8,
                }}>
                  <span className="mono" style={{ fontSize: 10.5, color: "var(--brass-500)", paddingTop: 3 }}>0{i + 1}</span>
                  <span style={{ fontSize: 14.5, color: "var(--navy-800)", lineHeight: 1.5 }}>{q}</span>
                  <span style={{ color: "var(--green-700)", paddingTop: 3 }}><IconCheck /></span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, {
  ExecutionPlatformSection, AudienceSection,
  WhyUAESection, WhyUsSection, CredibilitySection,
});