/* OrchEcomm website — Home page. */
function HomePage({ go }) {
  const I = window.OcWebIcons;
  const D = window.OcWeb;
  const wrap = { maxWidth: 1180, margin: "0 auto", padding: "0 24px" };

  const problems = [
    ["01", "Your platforms don't share data", "Shopify knows your orders. Stripe knows your payments. WooCommerce knows your inventory. None of them talk to each other automatically."],
    ["02", "Content creation is manual and inconsistent", "You design product graphics in Canva, upload them manually, and redo the work every time a price changes or a new product goes live."],
    ["03", "Supplier management lives in your inbox", "Quotes, negotiations, and purchase orders are scattered across emails and spreadsheets. There's no system of record."],
    ["04", "You need a developer to connect anything", "Every new integration requires a plugin, an API key, and a YouTube tutorial. Store operations shouldn't require an engineering degree."],
  ];

  const spotlights = [
    { label: "Payments & Revenue", side: "left", headline: "Route payments, recover revenue, and reconcile across platforms — automatically.", body: "Connect Stripe, Shopify Payments, and WooCommerce in one place. Smart routing ensures every transaction takes the best available path. Failed payments trigger recovery flows without you lifting a finger.", tags: ["Payment Orchestration", "Subscriptions & Billing", "Financial Reports"], mock: "payments" },
    { label: "Inventory & Supply Chain", side: "right", headline: "From low-stock alert to purchase order, without leaving your dashboard.", body: "OrchEcomm monitors your inventory in real time across all connected platforms, alerts you when stock runs low, and lets you contact verified suppliers and send purchase orders directly from the dashboard.", tags: ["Stock Management", "Multi-Store Sync", "Supplier Directory", "Purchase Orders"], mock: "suppliers" },
    { label: "Automated Content — Flagship Module", side: "left", headline: "Your store always looks on-brand. Even when you're not working.", body: "When you add a product, update a price, or activate a sale, OrchEcomm automatically generates matching product banners, social graphics, and promotional images using your brand templates. No Canva. No manual uploads.", tags: ["Visual Content Generation", "Template Editor", "Social Media Scheduler"], mock: "visual" },
  ];

  return (
    <div>
      {/* HERO */}
      <section style={{ position: "relative", overflow: "hidden", background: "var(--white)" }}>
        <div style={{ position: "absolute", inset: 0, backgroundImage: "radial-gradient(circle at 1px 1px, rgba(82,183,136,0.10) 1px, transparent 0)", backgroundSize: "28px 28px", maskImage: "radial-gradient(ellipse 80% 70% at 70% 40%, #000, transparent)", WebkitMaskImage: "radial-gradient(ellipse 80% 70% at 70% 40%, #000, transparent)" }} />
        <div style={{ ...wrap, position: "relative", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "center", minHeight: 600, padding: "72px 24px" }} className="web-hero-grid">
          <Reveal>
            <Eyebrow>One suite · every workflow</Eyebrow>
            <h1 style={{ font: "var(--font-sans)", fontSize: 60, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.04, color: "var(--ink-900)", margin: "18px 0 0", textWrap: "balance" }}>Every tool your store needs.<br /><span style={{ color: "var(--green-800)" }}>Orchestrated.</span></h1>
            <p style={{ font: "var(--font-sans)", fontSize: 18, lineHeight: 1.55, color: "var(--text-secondary)", marginTop: 20, maxWidth: 480 }}>23 interconnectable modules for store owners who are done juggling tools. Connect your platforms, switch on what you need, and let OrchEcomm do the rest.</p>
            <div style={{ display: "flex", gap: 13, marginTop: 28, flexWrap: "wrap" }}>
              <Btn variant="primary" size="lg" onClick={() => window.OcSignup.open()}>Start for free</Btn>
              <Btn variant="ghost" size="lg" onClick={() => go("modules")} iconRight={<I.ArrowRight size={17} />}>See all modules</Btn>
            </div>
            <p style={{ font: "var(--font-sans)", fontSize: 13, color: "var(--text-muted)", marginTop: 20 }}>No credit card required · Cancel anytime · Set up in minutes</p>
          </Reveal>
          <Reveal delay={120} y={0}>
            <div style={{ position: "relative" }}>{React.createElement(window.OrchestrationDiagram, {})}</div>
          </Reveal>
        </div>
      </section>

      <Ticker />

      {/* PROBLEM */}
      <section style={{ background: "var(--white)", padding: "96px 0" }}>
        <div style={wrap}>
          <Reveal style={{ textAlign: "center", maxWidth: 760, margin: "0 auto" }}>
            <h2 style={{ font: "var(--font-sans)", fontSize: 40, fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.12, color: "var(--ink-900)", textWrap: "balance" }}>Running a store today means juggling a mess of disconnected tools.</h2>
            <p style={{ font: "var(--font-sans)", fontSize: 17, lineHeight: 1.6, color: "var(--text-secondary)", marginTop: 18 }}>Most store owners use at least five separate tools to manage their business. None of them were built to work together. You end up syncing data manually, chasing discrepancies across dashboards, and losing revenue in the gaps.</p>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginTop: 48 }} className="web-2col">
            {problems.map(([num, title, desc], i) => (
              <Reveal key={num} delay={i * 80}>
                <div style={{ height: "100%", background: "var(--green-50)", border: "1px solid var(--border-subtle)", borderLeft: "3px solid var(--green-600)", borderRadius: "var(--radius-md)", padding: "22px 24px" }}>
                  <div style={{ font: "var(--font-mono)", fontSize: 13, fontWeight: 600, color: "var(--green-700)", letterSpacing: "0.04em" }}>{num} /</div>
                  <h3 style={{ font: "var(--font-sans)", fontSize: 19, fontWeight: 700, color: "var(--ink-900)", marginTop: 8, letterSpacing: "-0.01em" }}>{title}</h3>
                  <p style={{ font: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.55, color: "var(--text-secondary)", marginTop: 8 }}>{desc}</p>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal style={{ textAlign: "center", marginTop: 44 }}>
            <p style={{ font: "var(--font-sans)", fontSize: 24, fontWeight: 700, letterSpacing: "-0.01em", color: "var(--ink-900)" }}>OrchEcomm was built to fix this.</p>
          </Reveal>
        </div>
      </section>

      {/* SOLUTION */}
      <section style={{ background: "linear-gradient(170deg, var(--green-800), var(--green-900))", color: "#fff", padding: "100px 0", position: "relative", overflow: "hidden" }}>
        <div style={wrap}>
          <Reveal style={{ textAlign: "center", maxWidth: 800, margin: "0 auto" }}>
            <Eyebrow light>Why we exist</Eyebrow>
            <h2 style={{ font: "var(--font-sans)", fontSize: 42, fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.12, marginTop: 16, textWrap: "balance", color: "#fff" }}>Your store needs an operating layer, not another tool.</h2>
            <p style={{ font: "var(--font-sans)", fontSize: 18, lineHeight: 1.6, color: "var(--green-100)", marginTop: 18, maxWidth: 640, marginInline: "auto" }}>OrchEcomm is not a plugin. It is the connective tissue between every part of your store. One dashboard. One data layer. 23 modules that share information and react to each other's events.</p>
          </Reveal>
          <Reveal delay={120} style={{ marginTop: 44 }}>
            <div style={{ maxWidth: 940, margin: "0 auto" }}>{React.createElement(window.OrchestrationDiagram, { enhanced: true, onDark: true })}</div>
            <p style={{ textAlign: "center", font: "var(--font-sans)", fontSize: 13, color: "var(--green-200)", marginTop: 8 }}>Hover any module to see what it does</p>
          </Reveal>
        </div>
      </section>

      {/* MODULE SHOWCASE */}
      <section style={{ background: "var(--white)", padding: "96px 0" }}>
        <div style={{ ...wrap, display: "flex", flexDirection: "column", gap: 88 }}>
          {spotlights.map((s, i) => <SpotlightRow key={i} s={s} idx={i} />)}
        </div>
      </section>

      {/* MODULE COUNT */}
      <section style={{ background: "var(--bg-app-alt)", padding: "92px 0" }}>
        <div style={{ ...wrap, textAlign: "center" }}>
          <Reveal>
            <div style={{ font: "var(--font-sans)", fontSize: 88, fontWeight: 700, letterSpacing: "-0.04em", color: "var(--green-800)", lineHeight: 1 }}>23</div>
            <div style={{ font: "var(--font-sans)", fontSize: 22, fontWeight: 600, color: "var(--ink-900)", marginTop: 6 }}>modules. One suite.</div>
          </Reveal>
          <Reveal delay={100} style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: 10, maxWidth: 880, margin: "32px auto 0" }}>
            {D.WEB_MODULES.map((m) => (
              <span key={m.name} style={{ font: "var(--font-sans)", fontSize: 14, fontWeight: 500, color: "var(--green-800)", background: "var(--white)", border: "1px solid var(--green-300)", borderRadius: "var(--radius-full)", padding: "7px 15px" }}>{m.name}</span>
            ))}
          </Reveal>
          <Reveal delay={160}>
            <p style={{ font: "var(--font-sans)", fontSize: 16, color: "var(--text-secondary)", marginTop: 30 }}>Switch on what you need. Every module shares the same data layer.</p>
            <a href="#modules" onClick={(e) => { e.preventDefault(); go("modules"); }} style={{ display: "inline-flex", alignItems: "center", gap: 6, font: "var(--font-sans)", fontSize: 16, fontWeight: 600, color: "var(--green-800)", marginTop: 14, cursor: "pointer" }}>See all modules <I.ArrowRight size={17} /></a>
          </Reveal>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section style={{ background: "var(--white)", padding: "96px 0" }}>
        <div style={wrap}>
          <Reveal style={{ textAlign: "center" }}>
            <h2 style={{ font: "var(--font-sans)", fontSize: 38, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--ink-900)" }}>What store owners say.</h2>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18, marginTop: 44 }} className="web-3col">
            {D.WEB_TESTIMONIALS.map((t, i) => (
              <Reveal key={i} delay={i * 90}>
                <div style={{ height: "100%", background: "var(--white)", border: "1px solid var(--border-default)", borderTop: "3px solid var(--green-600)", borderRadius: "var(--radius-md)", padding: "26px 24px", boxShadow: "var(--shadow-sm)", display: "flex", flexDirection: "column" }}>
                  <p style={{ font: "var(--font-sans)", fontSize: 16, lineHeight: 1.55, color: "var(--ink-800)", fontWeight: 500, flex: 1 }}>“{t.quote}”</p>
                  <div style={{ display: "flex", alignItems: "center", gap: 11, marginTop: 22 }}>
                    <span style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--green-100)", color: "var(--green-800)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 15 }}>{t.name[0]}</span>
                    <div>
                      <div style={{ font: "var(--type-card-title)", color: "var(--ink-900)" }}>{t.name}</div>
                      <div style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>{t.role}</div>
                    </div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function SpotlightRow({ s, idx }) {
  const I = window.OcWebIcons;
  const copyLeft = s.side === "left";
  const Copy = (
    <Reveal y={20}>
      <Eyebrow>{s.label}</Eyebrow>
      <h3 style={{ font: "var(--font-sans)", fontSize: 30, fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.18, color: "var(--ink-900)", marginTop: 14, textWrap: "balance" }}>{s.headline}</h3>
      <p style={{ font: "var(--font-sans)", fontSize: 16.5, lineHeight: 1.6, color: "var(--text-secondary)", marginTop: 14 }}>{s.body}</p>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 20 }}>
        {s.tags.map((t) => <span key={t} style={{ font: "var(--font-sans)", fontSize: 13, fontWeight: 500, color: "var(--green-800)", border: "1px solid var(--green-300)", borderRadius: "var(--radius-full)", padding: "5px 12px" }}>{t}</span>)}
      </div>
    </Reveal>
  );
  const Visual = <Reveal delay={100} y={20}>{React.createElement(window["SpotlightMock_" + s.mock] || (() => null))}</Reveal>;
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }} className="web-spotlight">
      <div style={{ order: copyLeft ? 0 : 1 }}>{copyLeft ? Copy : Visual}</div>
      <div style={{ order: copyLeft ? 1 : 0 }}>{copyLeft ? Visual : Copy}</div>
    </div>
  );
}
window.HomePage = HomePage;