// site/sections-c.jsx — ways to grow · honesty · CTA · footer

// ════════════════════════════════════════════════════════════════════════
//  WAYS TO GROW — start → grow → own it (no PI / per-WI pricing jargon)
// ════════════════════════════════════════════════════════════════════════
function Grow() {
  const steps = [
    { n: "01", t: "Start", tag: "2 weeks · at cost", d: "One problem, one small team of specialists, real results in two weeks. You only cover the running cost — no big commitment to find out if it works." },
    { n: "02", t: "Grow", tag: "role by role", d: "Bring teammates onto more of your products and roles, at the pace you're comfortable with. Add what helps; drop what doesn't." },
    { n: "03", t: "Own it", tag: "no lock-in", d: "Want to run it yourself? We train your team to drive the whole thing in-house. Everything is yours — we're designed to be optional." },
  ];
  return (
    <Section id="grow" max={1000}>
      <div className="reveal" style={{ textAlign: "center", marginBottom: 48 }}>
        <Eyebrow icon="layers">Ways to grow with us</Eyebrow>
        <h2 className="h-section" style={{ fontSize: "clamp(28px, 3.4vw, 40px)", margin: 0 }}>Go at your own pace.</h2>
        <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--fg-2)", maxWidth: 600, margin: "20px auto 0" }}>
          There's no contract to sign before you've seen it work. Start tiny, and only grow when it's earned a bigger place.
        </p>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }} className="grow-grid">
        {steps.map((s, i) => (
          <Card key={s.n} className="reveal" pad={26} style={{ transitionDelay: (i * 80) + "ms", display: "flex", flexDirection: "column", gap: 12 }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <span className="num-badge">{s.n}</span>
              <Tag tone="neutral">{s.tag}</Tag>
            </div>
            <div style={{ fontSize: 19, fontWeight: 600, color: "var(--fg-1)" }}>{s.t}</div>
            <div style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--fg-3)" }}>{s.d}</div>
          </Card>
        ))}
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════════════════
//  HONESTY — what we're not (humanized)
// ════════════════════════════════════════════════════════════════════════
function Honesty() {
  const items = [
    { t: "Not here to replace your team", d: "The whole point is to make the people you have go further. Your engineers stay in charge of everything that ships." },
    { t: "Not a long contract", d: "Start with two weeks. Grow only if it earns it. Cancel any time — and keep all the work that got done." },
    { t: "Not a lock-in", d: "Everything we set up is documented and portable. If you'd rather run it yourself, we'll teach your team how." },
    { t: "Not a magic black box", d: "You see what every teammate did, in plain language, and you approve it. No mystery, no autopilot you can't stop." },
  ];
  return (
    <Section id="honesty" bg="var(--bg-base)" max={980} style={{ borderTop: "var(--hairline) solid var(--border-1)" }}>
      <div className="reveal" style={{ textAlign: "center", marginBottom: 44 }}>
        <Eyebrow icon="eye">Straight talk</Eyebrow>
        <h2 className="h-section" style={{ fontSize: "clamp(26px, 3.2vw, 38px)", margin: 0 }}>What wakalix is <span style={{ color: "var(--accent)" }}>not.</span></h2>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="honesty-grid">
        {items.map((it, i) => (
          <div key={i} className="reveal" style={{ display: "flex", gap: 14, padding: "20px 22px", borderRadius: "var(--r-4)", border: "var(--hairline) solid var(--border-1)", background: "var(--bg-raised)", transitionDelay: (i % 2 * 70) + "ms" }}>
            <span style={{ width: 26, height: 26, borderRadius: 7, background: "var(--bad-soft)", color: "var(--bad)", display: "grid", placeItems: "center", flexShrink: 0 }}><Ico name="x" size={13} stroke={2} /></span>
            <div>
              <div style={{ fontSize: 15, fontWeight: 600, color: "var(--fg-1)", marginBottom: 5 }}>{it.t}</div>
              <div style={{ fontSize: 13, color: "var(--fg-3)", lineHeight: 1.55 }}>{it.d}</div>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════════════════
//  CTA — bring us one problem
// ════════════════════════════════════════════════════════════════════════
function CTA() {
  return (
    <Section id="cta" max={1120} pad="0">
      <div className="reveal" style={{ position: "relative", overflow: "hidden", borderRadius: "var(--r-4)", margin: "90px 0", padding: "64px 48px",
        background: "linear-gradient(150deg, var(--accent-softer), var(--bg-raised))", border: "var(--hairline) solid var(--accent-border)" }}>
        <div className="glow" style={{ width: 460, height: 460, top: -200, right: -80, background: "oklch(from var(--accent) l c h / 0.18)" }} />
        <div style={{ position: "relative", zIndex: 1, display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 48, alignItems: "center" }} className="cta-grid">
          <div>
            <Eyebrow icon="dispatch">Let's start</Eyebrow>
            <h2 className="h-section" style={{ fontSize: "clamp(30px, 4vw, 46px)", margin: 0 }}>Bring us one problem.</h2>
            <p style={{ fontSize: 16.5, lineHeight: 1.55, color: "var(--fg-2)", marginTop: 18, maxWidth: 440 }}>
              Tell us about one thing that has been stuck: a feature, migration, flaky test suite, refactor, or production-readiness gap. We'll show how the engine would approach it, which roles would be involved, and what reviewable output your team would receive.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 30, flexWrap: "wrap" }}>
              <a className="btn btn-lg" data-variant="primary" data-book="1" href="mailto:contact@wakalix.com?subject=wakalix%20walkthrough" style={{ textDecoration: "none" }}>
                Book a walkthrough <Ico name="arrowR" size={14} className="arr" />
              </a>
              <a className="btn btn-lg" href="mailto:contact@wakalix.com" style={{ textDecoration: "none" }}>
                <Ico name="mail" size={14} /> contact@wakalix.com
              </a>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {[["A walkthrough, not a sales pitch","See the engine work on a real problem like yours, live.","sparkle"],["Your team stays in control","Nothing goes out automatically. Your engineers review and approve every piece of work before it lands.","shield"],["You keep what gets built","Whatever ships in the trial is yours, full stop.","check"],["Start small, grow only if it works","No contract to sign before you've seen it earn trust.","layers"]].map(([t, d, icon]) => (
              <div key={t} style={{ display: "flex", gap: 12, alignItems: "flex-start", padding: "13px 15px", borderRadius: "var(--r-3)", background: "var(--bg-base)", border: "var(--hairline) solid var(--border-1)" }}>
                <span style={{ width: 22, height: 22, borderRadius: 6, background: "var(--ok-soft)", color: "var(--ok)", display: "grid", placeItems: "center", flexShrink: 0, marginTop: 1 }}><Ico name="check" size={12} stroke={2.2} /></span>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 600, color: "var(--fg-1)" }}>{t}</div>
                  <div style={{ fontSize: 12.5, color: "var(--fg-3)", lineHeight: 1.45, marginTop: 2 }}>{d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════════════════
//  FOOTER
// ════════════════════════════════════════════════════════════════════════
function Footer() {
  return (
    <footer className="site-foot" style={{ borderTop: "var(--hairline) solid var(--border-1)", background: "var(--bg-base)" }}>
      <div style={{ maxWidth: 1120, margin: "0 auto", padding: "48px 32px 40px", display: "flex", gap: 40, justifyContent: "space-between", flexWrap: "wrap" }}>
        <div style={{ maxWidth: 320 }}>
          <Logo size={30} />
          <p style={{ fontSize: 13, color: "var(--fg-3)", lineHeight: 1.55, marginTop: 16 }}>
            A senior AI teammate for every role on your team — doing the legwork while your people stay in charge.
          </p>
          <div style={{ display: "flex", gap: 10, marginTop: 16 }}>
            <a href="https://github.com/ai-mpathyminds" className="btn" data-variant="ghost" style={{ height: 32, width: 32, padding: 0, justifyContent: "center" }} title="GitHub"><Ico name="github" size={16} /></a>
            <a href="mailto:contact@wakalix.com" className="btn" data-variant="ghost" style={{ height: 32, width: 32, padding: 0, justifyContent: "center" }} title="Email"><Ico name="mail" size={16} /></a>
          </div>
        </div>
        <div style={{ display: "flex", gap: 56, flexWrap: "wrap" }}>
          {[["Product",[["How it works","#how"],["The engine","#engine"],["AI cost","#cost"],["Brand & logo","Wakalix Brand.html"]]],["Trust",[["Predictable cost","#cost"],["Our story","#story"],["Straight talk","#honesty"]]],["Company",[["AimpathyMinds","#top"],["Contact","mailto:contact@wakalix.com"]]]].map(([h, links]) => (
            <div key={h}>
              <div style={{ fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--fg-3)", marginBottom: 14 }}>{h}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {links.map(([l, href]) => <a key={l} href={href}>{l}</a>)}
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ borderTop: "var(--hairline) solid var(--border-1)" }}>
        <div style={{ maxWidth: 1120, margin: "0 auto", padding: "18px 32px", display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
          <span style={{ fontSize: 12, color: "var(--fg-4)" }}>© 2026 AimpathyMinds · wakalix.dev</span>
          <span style={{ fontSize: 12, color: "var(--fg-4)" }}>Your team, amplified — not replaced.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Grow, Honesty, CTA, Footer });
