/* global React */
const { useState, useEffect, useRef } = React;

const COLORS = {
  terra: "#D9583C",
  marigold: "#E8A93C",
  sage: "#6B9362",
  plum: "#6E3F66",
  sky: "#6FA3C7",
  rose: "#E8B4A6",
};

/* ============ HERO ============ */
function Nav() {
  return (
    <nav className="nav">
      <a href="#" className="wordmark">
        <span className="seed"></span>
        Harvest
      </a>
      <div className="nav-links">
        <a href="#garden">The garden</a>
        <a href="#conversations">Conversations</a>
        <a href="talk.html">Talk to us</a>
      </div>
      <a href="talk.html" className="nav-cta">Talk to a human →</a>
    </nav>
  );
}

function HeroShape({ x, y, size, color, rot = 0, dx = 12, dy = -16, delay = 0, kind = "circle" }) {
  const style = {
    left: x, top: y,
    width: size, height: size,
    "--rot": rot + "deg",
    "--dx": dx + "px",
    "--dy": dy + "px",
    animationDelay: delay + "s",
  };
  if (kind === "circle") {
    return <div className="hero-shape" style={{ ...style, background: color, borderRadius: "50%" }} />;
  }
  if (kind === "petal") {
    return <div className="hero-shape" style={{ ...style, background: color, borderRadius: "50% 50% 50% 0", transform: `rotate(${rot}deg)` }} />;
  }
  if (kind === "blob") {
    return <div className="hero-shape" style={{ ...style, background: color, borderRadius: "63% 37% 54% 46% / 55% 48% 52% 45%" }} />;
  }
  return null;
}

function Hero() {
  return (
    <section className="hero">
      <HeroShape x="8%" y="18%" size={84} color={COLORS.terra} kind="petal" rot={-25} />
      <HeroShape x="14%" y="62%" size={48} color={COLORS.marigold} kind="circle" delay={1.5} />
      <HeroShape x="86%" y="22%" size={120} color={COLORS.sage} kind="blob" rot={15} delay={2} />
      <HeroShape x="90%" y="64%" size={62} color={COLORS.plum} kind="circle" delay={3.5} />
      <HeroShape x="4%" y="82%" size={36} color={COLORS.sky} kind="circle" delay={2.8} />
      <HeroShape x="80%" y="84%" size={44} color={COLORS.rose} kind="petal" rot={45} delay={1} />

      <div>
        <h1>
          A quiet AI<br/>that helps your<br/><span className="grow">ads grow</span>.
        </h1>
        <p>
          You build something people love. Harvest runs the paid ads — through plain conversation, with your blessing on every move.
        </p>
        <div className="hero-cta">
          <a href="talk.html" className="btn-primary">
            Talk to us <span className="arrow">→</span>
          </a>
          <a href="#garden" className="btn-secondary">See it work</a>
        </div>
      </div>
    </section>
  );
}

/* ============ THE GARDEN ============ */
const CAMPAIGNS = [
  { name: "Linen Tote · Summer",   x: 12, size: 68, color: COLORS.terra,    stem: 28, label: "ROAS 4.8×" },
  { name: "Candle · Hand-poured",  x: 24, size: 92, color: COLORS.marigold, stem: 44, label: "ROAS 6.2×" },
  { name: "Ceramic Mug",           x: 36, size: 52, color: COLORS.sage,     stem: 22, label: "ROAS 3.4×" },
  { name: "Apron · Indigo",        x: 48, size: 76, color: COLORS.plum,     stem: 36, label: "ROAS 5.1×" },
  { name: "Field Notes Card",      x: 60, size: 44, color: COLORS.sky,      stem: 18, label: "ROAS 2.9×" },
  { name: "Olive Oil · Cold-press",x: 72, size: 88, color: COLORS.rose,     stem: 38, label: "ROAS 5.7×" },
  { name: "Ginger Soap",           x: 84, size: 60, color: COLORS.terra,    stem: 26, label: "ROAS 4.1×" },
];

function Garden() {
  const [tick, setTick] = useState(0);
  const [hovered, setHovered] = useState(null);

  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 3500);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="garden-section" id="garden">
      <div className="section-label">Live · your account, visualized</div>
      <h2 className="section-h">Your campaigns,<br/>as a <em>garden</em>.</h2>
      <p className="section-sub">
        Every bloom is a campaign. Size is spend. Color is performance. Watch it grow as Harvest tends it — pausing, planting, and pruning while you build.
      </p>

      <div className="garden">
        <div className="garden-status">
          <span className="live-dot"></span>
          Tending · last action 2 min ago
        </div>

        <div className="garden-soil">
          {CAMPAIGNS.map((c, i) => {
            const wobble = Math.sin((tick + i) * 0.7) * 8;
            const sizeShift = Math.sin((tick + i) * 0.5) * 6;
            const size = c.size + sizeShift;
            return (
              <div
                key={i}
                className={"bloom" + (hovered === i ? " hovered" : "")}
                onMouseEnter={() => setHovered(i)}
                onMouseLeave={() => setHovered(null)}
                style={{
                  left: `calc(${c.x}% - ${size / 2}px)`,
                  bottom: `${c.stem + 20}%`,
                  width: size,
                  height: size,
                  background: c.color,
                  transform: `rotate(${wobble}deg)`,
                  boxShadow: hovered === i ? `0 12px 32px ${c.color}55` : `0 6px 20px ${c.color}33`,
                  cursor: "pointer",
                  zIndex: hovered === i ? 5 : 1,
                }}
              >
                <div className="stem" style={{ height: `${c.stem * 4}px` }}></div>
                <div className="bloom-label">{c.name} · {c.label}</div>
              </div>
            );
          })}
        </div>

        <div className="garden-legend">
          <span className="swatch"><span className="dot" style={{ background: COLORS.sage }}></span>thriving</span>
          <span className="swatch"><span className="dot" style={{ background: COLORS.marigold }}></span>steady</span>
          <span className="swatch"><span className="dot" style={{ background: COLORS.terra }}></span>needs care</span>
        </div>
      </div>
    </section>
  );
}

/* ============ CONVERSATIONS ============ */
function Conversations() {
  const cards = [
    {
      cls: "c1",
      tag: "Creative refresh",
      lines: [
        { who: "You", type: "user", text: "Linen tote sales are slowing." },
        { who: "Harvest", type: "ai", text: "The carousel has run 19 days — creative fatigue. May I draft three new variants leaning into 'made in 4 days'?" },
      ],
      outcome: "CPA",
      result: "$14 → $9",
    },
    {
      cls: "c2",
      tag: "Budget defense",
      lines: [
        { who: "You", type: "user", text: "Why did we spend $400 Friday?" },
        { who: "Harvest", type: "ai", text: "Market-wide CPC spike — not your account. I auto-throttled the weekend. Want me to set a permanent cap?" },
      ],
      outcome: "Weekend waste",
      result: "−64%",
    },
    {
      cls: "c3",
      tag: "Scale-up",
      lines: [
        { who: "Harvest", type: "ai", text: "The candle video hit 3.1% CTR overnight — 1.6× the control. I'd like to scale it to $200/day." },
        { who: "You", type: "user", text: "Approved. Keep watching it." },
      ],
      outcome: "Spend",
      result: "$40 → $200/d",
    },
  ];

  return (
    <section className="conv-section" id="conversations">
      <div style={{ textAlign: "center" }}>
        <div className="section-label">How it sounds</div>
        <h2 className="section-h">Three small <em>conversations</em>.</h2>
        <p className="section-sub">No dashboards. No agency. Just a quiet collaborator that asks before it acts.</p>
      </div>

      <div className="conv-grid">
        {cards.map((c, i) => (
          <div className={"conv-card " + c.cls} key={i}>
            <div className="conv-tag">
              <span className="dot"></span>
              {c.tag}
            </div>
            {c.lines.map((l, j) => (
              <div className={"conv-msg " + l.type} key={j}>
                <div className="who">{l.who}</div>
                <div className="text">{l.text}</div>
              </div>
            ))}
            <div className="conv-outcome">
              <span>{c.outcome}</span>
              <strong>{c.result}</strong>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ============ FINAL CTA ============ */
function Final() {
  return (
    <section className="final">
      <HeroShape x="6%" y="22%" size={70} color={COLORS.terra} kind="petal" rot={-15} delay={0.5} />
      <HeroShape x="88%" y="28%" size={54} color={COLORS.sky} kind="circle" delay={2} />
      <HeroShape x="14%" y="74%" size={42} color={COLORS.rose} kind="circle" delay={3.5} />
      <HeroShape x="84%" y="76%" size={88} color={COLORS.sage} kind="blob" delay={1.2} />

      <h2>Spend your hours on <em>product</em>.</h2>
      <p>A 15-minute call with a founder. No deck. No salesperson. We'll look at your account together.</p>
      <a href="talk.html" className="btn-primary">
        Talk to us <span className="arrow">→</span>
      </a>
      <div className="meta">
        <span>15 minutes</span>
        <span>·</span>
        <span>Maya picks up</span>
        <span>·</span>
        <span>This week, slots open</span>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div>© 2026 Harvest · harvestapp.ai</div>
      <div className="links">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="talk.html">Contact</a>
      </div>
    </footer>
  );
}

/* TWEAKS */
function HarvestTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Headline">
        <TweakRadio
          label="Variant"
          value={tweaks.headline}
          options={[
            { value: "grow", label: "Ads grow" },
            { value: "quiet", label: "Quiet AI" },
            { value: "tend", label: "Tends ads" },
          ]}
          onChange={v => setTweak("headline", v)}
        />
      </TweakSection>
      <TweakSection title="Mood">
        <TweakRadio
          label="Palette"
          value={tweaks.palette}
          options={[
            { value: "warm", label: "Warm" },
            { value: "cool", label: "Cool" },
            { value: "mono", label: "Mono" },
          ]}
          onChange={v => setTweak("palette", v)}
        />
      </TweakSection>
      <TweakSection title="Motion">
        <TweakToggle label="Floating shapes" value={tweaks.shapes} onChange={v => setTweak("shapes", v)} />
        <TweakToggle label="Garden animates" value={tweaks.animate} onChange={v => setTweak("animate", v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

const HEADLINES = {
  grow: <React.Fragment>A quiet AI<br/>that helps your<br/><span className="grow">ads grow</span>.</React.Fragment>,
  quiet: <React.Fragment>Run paid ads<br/>like you're <span className="grow">whispering</span><br/>to a friend.</React.Fragment>,
  tend: <React.Fragment>You build.<br/>Harvest <span className="grow">tends</span><br/>the ads.</React.Fragment>,
};

const PALETTES = {
  warm: { terra: "#D9583C", marigold: "#E8A93C", sage: "#6B9362", plum: "#6E3F66", sky: "#6FA3C7", rose: "#E8B4A6" },
  cool: { terra: "#3C8AD9", marigold: "#3CD9B5", sage: "#6293B4", plum: "#3F4D6E", sky: "#A6CFE8", rose: "#B4E8DA" },
  mono: { terra: "#1A1814", marigold: "#4A4438", sage: "#8B8474", plum: "#2E2A22", sky: "#B5AE9D", rose: "#D1CABA" },
};

function App() {
  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "headline": "grow",
    "palette": "warm",
    "shapes": true,
    "animate": true
  }/*EDITMODE-END*/);

  useEffect(() => {
    const p = PALETTES[tweaks.palette] || PALETTES.warm;
    Object.entries(p).forEach(([k, v]) => {
      document.documentElement.style.setProperty("--" + k, v);
      COLORS[k] = v;
    });
    document.body.classList.toggle("no-shapes", !tweaks.shapes);
  }, [tweaks.palette, tweaks.shapes]);

  // Patch: hide shapes when toggle off
  useEffect(() => {
    const styleId = "shape-toggle-style";
    let el = document.getElementById(styleId);
    if (!el) {
      el = document.createElement("style");
      el.id = styleId;
      document.head.appendChild(el);
    }
    el.textContent = tweaks.shapes ? "" : ".hero-shape, .final-shape { display: none !important; }";
  }, [tweaks.shapes]);

  return (
    <React.Fragment>
      <Nav />
      <section className="hero">
        {tweaks.shapes && <React.Fragment>
          <HeroShape x="8%" y="18%" size={84} color={COLORS.terra} kind="petal" rot={-25} />
          <HeroShape x="14%" y="62%" size={48} color={COLORS.marigold} kind="circle" delay={1.5} />
          <HeroShape x="86%" y="22%" size={120} color={COLORS.sage} kind="blob" rot={15} delay={2} />
          <HeroShape x="90%" y="64%" size={62} color={COLORS.plum} kind="circle" delay={3.5} />
          <HeroShape x="4%" y="82%" size={36} color={COLORS.sky} kind="circle" delay={2.8} />
          <HeroShape x="80%" y="84%" size={44} color={COLORS.rose} kind="petal" rot={45} delay={1} />
        </React.Fragment>}
        <div>
          <h1>{HEADLINES[tweaks.headline]}</h1>
          <p>You build something people love. Harvest runs the paid ads — through plain conversation, with your blessing on every move.</p>
          <div className="hero-cta">
            <a href="talk.html" className="btn-primary">Talk to us <span className="arrow">→</span></a>
            <a href="#garden" className="btn-secondary">See it work</a>
          </div>
        </div>
      </section>
      <Garden />
      <Conversations />
      <Final />
      <Footer />
      <HarvestTweaks tweaks={tweaks} setTweak={setTweak} />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);