/* OrchEcomm website — Pricing and About pages. */
function PricingPage({ go }) {
  const I = window.OcWebIcons;
  const D = window.OcWeb;
  const wrap = { maxWidth: 1180, margin: "0 auto", padding: "0 24px" };
  const features = [
    "All 23 modules included",
    "Unlimited platform connections (Shopify, WooCommerce, Stripe)",
    "Automated visual content generation",
    "Supplier directory access",
    "Unified analytics dashboard",
    "Email and priority support",
    "New modules as they ship, included",
  ];
  return (
    <div>
      {/* HERO */}
      <section style={{ background: "var(--white)", padding: "84px 0 48px" }}>
        <div style={{ ...wrap, textAlign: "center", maxWidth: 720 }}>
          <Reveal>
            <Eyebrow style={{ justifyContent: "center" }}>Pricing</Eyebrow>
            <h1 style={{ font: "var(--font-sans)", fontSize: 50, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.08, color: "var(--ink-900)", marginTop: 16 }}>Simple pricing. No surprises.</h1>
            <p style={{ font: "var(--font-sans)", fontSize: 18, color: "var(--text-secondary)", marginTop: 14 }}>One plan. Every module included. Pay as you grow.</p>
          </Reveal>
        </div>
      </section>

      {/* PRICING CARD */}
      <section style={{ background: "var(--white)", padding: "0 0 80px" }}>
        <div style={{ ...wrap, maxWidth: 520 }}>
          <Reveal>
            <div style={{ background: "var(--white)", border: "1px solid var(--border-default)", borderTop: "4px solid var(--green-700)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-lg)", padding: "34px 32px", position: "relative", overflow: "hidden" }}>
              <div style={{ position: "absolute", top: -40, right: -40, width: 180, height: 180, opacity: 0.4, pointerEvents: "none" }}>
                <svg viewBox="0 0 180 180" fill="none"><g stroke="var(--green-300)" strokeWidth="1.5" opacity="0.6"><circle cx="140" cy="40" r="40"/><circle cx="140" cy="40" r="70"/></g><circle cx="140" cy="40" r="5" fill="var(--green-500)"/></svg>
              </div>
              <div style={{ position: "relative" }}>
                <div style={{ font: "var(--type-eyebrow)", textTransform: "uppercase", letterSpacing: "var(--tracking-caps)", color: "var(--green-700)" }}>OrchEcomm Suite</div>
                <div style={{ font: "var(--font-sans)", fontSize: 40, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--ink-900)", marginTop: 12 }}>Free to start</div>
                <div style={{ font: "var(--font-sans)", fontSize: 15, color: "var(--text-secondary)", marginTop: 6 }}>Then 0.8% + €0.19 per transaction processed through OrchEcomm</div>
                <div style={{ height: 1, background: "var(--border-subtle)", margin: "24px 0" }} />
                <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                  {features.map((f) => (
                    <div key={f} style={{ display: "flex", alignItems: "flex-start", gap: 11 }}>
                      <span style={{ width: 20, height: 20, borderRadius: "50%", background: "var(--green-100)", color: "var(--green-700)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, marginTop: 1 }}><I.Check size={13} /></span>
                      <span style={{ font: "var(--font-sans)", fontSize: 15, color: "var(--ink-800)" }}>{f}</span>
                    </div>
                  ))}
                </div>
                <div style={{ marginTop: 26 }}><Btn variant="primary" size="lg" onClick={() => window.OcSignup.open()} style={{ width: "100%" }}>Start for free</Btn></div>
                <p style={{ textAlign: "center", font: "var(--font-sans)", fontSize: 13, color: "var(--text-muted)", marginTop: 14 }}>No credit card required. Cancel anytime.</p>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ background: "var(--bg-app-alt)", padding: "88px 0" }}>
        <div style={{ ...wrap, maxWidth: 760 }}>
          <Reveal style={{ textAlign: "center", marginBottom: 36 }}>
            <h2 style={{ font: "var(--font-sans)", fontSize: 34, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--ink-900)" }}>Questions, answered.</h2>
          </Reveal>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {D.WEB_FAQS.map((f, i) => <FaqItem key={i} f={f} idx={i} defaultOpen={i === 0} />)}
          </div>
        </div>
      </section>
    </div>
  );
}

function FaqItem({ f, defaultOpen }) {
  const I = window.OcWebIcons;
  const [open, setOpen] = React.useState(!!defaultOpen);
  return (
    <Reveal>
      <div style={{ background: "var(--white)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-md)", overflow: "hidden" }}>
        <button onClick={() => setOpen((o) => !o)} style={{ width: "100%", display: "flex", alignItems: "center", gap: 14, padding: "18px 20px", border: "none", background: "transparent", cursor: "pointer", textAlign: "left" }}>
          <span style={{ flex: 1, font: "var(--font-sans)", fontSize: 16, fontWeight: 600, color: "var(--ink-900)" }}>{f.q}</span>
          <span style={{ display: "inline-flex", color: "var(--green-700)", transform: open ? "rotate(180deg)" : "none", transition: "transform var(--transition-base)" }}><I.ChevronDown size={20} /></span>
        </button>
        <div style={{ maxHeight: open ? 240 : 0, overflow: "hidden", transition: "max-height var(--transition-slow)" }}>
          <p style={{ font: "var(--font-sans)", fontSize: 15, lineHeight: 1.6, color: "var(--text-secondary)", padding: "0 20px 20px" }}>{f.a}</p>
        </div>
      </div>
    </Reveal>
  );
}
window.PricingPage = PricingPage;

function AboutPage({ go }) {
  const I = window.OcWebIcons;
  const wrap = { maxWidth: 1180, margin: "0 auto", padding: "0 24px" };
  const values = [
    { icon: "Store", title: "Built for the operator, not the developer", body: "We assume you know your business, not your API keys. OrchEcomm is designed to be powerful without requiring technical setup." },
    { icon: "Puzzle", title: "Modular by design", body: "You should never pay for or be distracted by tools you don't use. Every module is opt-in and independent." },
    { icon: "Trending", title: "Growing with you", body: "New modules ship every month based on what real store owners ask for. The suite grows as the needs of your business grow." },
  ];
  return (
    <div>
      {/* STATEMENT */}
      <section style={{ position: "relative", background: "var(--white)", overflow: "hidden", padding: "92px 0 80px" }}>
        <div style={{ position: "absolute", inset: 0, backgroundImage: "radial-gradient(circle at 1px 1px, rgba(82,183,136,0.09) 1px, transparent 0)", backgroundSize: "28px 28px", maskImage: "radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent)", WebkitMaskImage: "radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent)" }} />
        <div style={{ ...wrap, position: "relative", maxWidth: 800, textAlign: "center" }}>
          <Reveal>
            <Eyebrow style={{ justifyContent: "center" }}>Our story</Eyebrow>
            <h1 style={{ font: "var(--font-sans)", fontSize: 46, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.1, color: "var(--ink-900)", marginTop: 16, textWrap: "balance" }}>We built the tool we needed and couldn't find.</h1>
            <p style={{ font: "var(--font-sans)", fontSize: 18, lineHeight: 1.65, color: "var(--text-secondary)", marginTop: 22, textAlign: "left" }}>OrchEcomm started as a frustration. Managing a real store meant bouncing between Shopify, Stripe, Canva, a CSV exporter, and an email tool — none of which knew the others existed. We decided to build the layer between them. One dashboard, one data layer, and modules that actually talk to each other.</p>
          </Reveal>
        </div>
      </section>

      {/* VALUES */}
      <section style={{ background: "var(--bg-app-alt)", padding: "88px 0" }}>
        <div style={{ ...wrap, display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18 }} className="web-3col">
          {values.map((v, i) => (
            <Reveal key={i} delay={i * 90}>
              <div style={{ height: "100%", background: "var(--white)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-lg)", padding: "28px 26px", boxShadow: "var(--shadow-sm)" }}>
                <span style={{ width: 50, height: 50, borderRadius: "var(--radius-md)", background: "var(--green-100)", color: "var(--green-700)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>{React.createElement(I[v.icon], { size: 25 })}</span>
                <h3 style={{ font: "var(--font-sans)", fontSize: 19, fontWeight: 700, color: "var(--ink-900)", marginTop: 18, letterSpacing: "-0.01em", lineHeight: 1.25 }}>{v.title}</h3>
                <p style={{ font: "var(--font-sans)", fontSize: 15, lineHeight: 1.6, color: "var(--text-secondary)", marginTop: 10 }}>{v.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>
    </div>
  );
}
window.AboutPage = AboutPage;