/* global React */
/* Depends on: Icon, Eyebrow (components.jsx) */
const { useState: useStateB } = React;

/* ───────────────────────────── APPROACH (dark band) ───────────────────────────── */
const Approach = () => {
  const steps = [
    { n: "01", t: "Understand", b: "Before a line of code, I learn the business and the people. What does ‘done' actually mean here, and what's quietly in the way?" },
    { n: "02", t: "Shape", b: "A tight plan: the architecture, the risks named early, and the smallest version that proves the idea is worth finishing." },
    { n: "03", t: "Build", b: "Steady, visible progress. You see working software every week, not a status doc, and you can change your mind while it's still cheap." },
    { n: "04", t: "Ship", b: "The last 20% most projects skip: the polish, the edge cases, the handoff. It goes live, and your team can carry it without me." },
  ];
  return (
    <section id="approach" style={{ padding: "104px 0", background: "var(--aubergine-900)", color: "white", position: "relative", overflow: "hidden", scrollMarginTop: 60 }}>
      <div style={{
        position: "absolute", top: -120, right: -120, width: 520, height: 520, borderRadius: "50%", pointerEvents: "none",
        background: "radial-gradient(circle, color-mix(in oklab, var(--pop) 18%, transparent) 0%, transparent 70%)",
      }} />
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 32px", position: "relative" }}>
        <div style={{ maxWidth: 680, marginBottom: 64 }}>
          <Eyebrow onDark style={{ marginBottom: 16 }}>How I work</Eyebrow>
          <h2 style={{ margin: 0, fontSize: "clamp(34px, 4.6vw, 52px)", fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.07, color: "white" }}>
            Calm, deliberate,<br />and shipped.
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "rgba(255,255,255,0.7)", maxWidth: 540 }}>
            Working with one person should mean fewer meetings and more momentum.
            This is how an engagement usually goes.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: "var(--radius-lg)", overflow: "hidden" }}>
          {steps.map((s) => (
            <div key={s.n} style={{ background: "var(--aubergine-800)", padding: "32px 26px", display: "flex", flexDirection: "column", gap: 12, minHeight: 230 }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600, color: "var(--site-accent)" }}>{s.n}</span>
              <h3 style={{ margin: 0, fontSize: 21, fontWeight: 600, letterSpacing: "-0.01em", color: "white" }}>{s.t}</h3>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: "rgba(255,255,255,0.66)" }}>{s.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ───────────────────────────── ABOUT ───────────────────────────── */
const About = ({ biz }) => {
  const modes = [
    { i: "cube", t: "Solo build", d: "Idea to production, owned end to end." },
    { i: "target", t: "Technical lead", d: "Set direction, make the calls, unblock the team." },
    { i: "code", t: "Embedded engineer", d: "Slot in as a senior dev alongside your team." },
  ];
  return (
  <section id="about" style={{ padding: "112px 0", scrollMarginTop: 60 }}>
    <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 32px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 80, alignItems: "start" }}>
        <div>
          <Eyebrow style={{ marginBottom: 16 }}>About</Eyebrow>
          <h2 style={{ margin: 0, fontSize: "clamp(32px, 4.2vw, 50px)", fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.06 }}>
            However you need<br />an engineer.
          </h2>
          <div style={{ marginTop: 36, display: "flex", flexDirection: "column", gap: 18 }}>
            {[
              { i: "server", l: "Specialty", v: "AWS · backend systems" },
              { i: "pin", l: "Based in", v: "Los Angeles" },
              { i: "cube", l: "Operating as", v: biz.entity },
            ].map((f) => (
              <div key={f.l} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span style={{ width: 36, height: 36, borderRadius: "var(--radius-sm)", background: "var(--bg-muted)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  <Icon name={f.i} size={16} color="var(--site-accent-deep)" />
                </span>
                <span style={{ display: "flex", flexDirection: "column" }}>
                  <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-tertiary)" }}>{f.l}</span>
                  <span style={{ fontSize: 15, fontWeight: 600, color: "var(--text)" }}>{f.v}</span>
                </span>
              </div>
            ))}
          </div>
        </div>
        <div>
          <div style={{ display: "flex", flexDirection: "column", gap: 18, fontSize: 18, lineHeight: 1.65, color: "var(--text-secondary)" }}>
            <p style={{ margin: 0 }}>
              Valteria is my studio: one product engineer and systems architect who's
              spent a decade shipping software. Senior engineering inside big companies,
              consulting, and building (and selling) a few products of my own.
            </p>
            <p style={{ margin: 0 }}>
              Being independent is the point. I shape the engagement around what you need
              instead of a fixed package. Some clients want a product built end to end,
              solo. Others need me to lead the work as technical lead, or to slot in as a
              senior developer alongside their team. The work decides.
            </p>
          </div>
          <div style={{ marginTop: 40, paddingTop: 32, borderTop: "1px solid var(--border)" }}>
            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--site-accent-deep)", marginBottom: 20 }}>Ways to work together</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              {modes.map((m) => (
                <div key={m.t} style={{ display: "flex", alignItems: "center", gap: 14 }}>
                  <span style={{ width: 42, height: 42, borderRadius: "var(--radius-md)", background: "var(--brand-subtle)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, color: "var(--aubergine-800)" }}>
                    <Icon name={m.i} size={18} />
                  </span>
                  <span style={{ display: "flex", flexDirection: "column", gap: 1 }}>
                    <span style={{ fontSize: 16, fontWeight: 600, letterSpacing: "-0.01em", color: "var(--text)" }}>{m.t}</span>
                    <span style={{ fontSize: 14.5, color: "var(--text-secondary)" }}>{m.d}</span>
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  );
};

/* ───────────────────────────── CONTACT (dark CTA + working form) ───────────────────────────── */
const Field = ({ label, children, error }) => (
  <label style={{ display: "flex", flexDirection: "column", gap: 7 }}>
    <span style={{ fontSize: 13, fontWeight: 500, color: "rgba(255,255,255,0.7)" }}>{label}</span>
    {children}
    {error && <span style={{ fontSize: 12, color: "var(--copper-300)" }}>{error}</span>}
  </label>
);

const Contact = ({ biz }) => {
  const [form, setForm] = useStateB({ name: "", email: "", company: "", message: "" });
  const [errors, setErrors] = useStateB({});
  const [sent, setSent] = useStateB(false);
  const [sending, setSending] = useStateB(false);
  const [submitError, setSubmitError] = useStateB("");

  const inputStyle = {
    height: 46, padding: "0 14px", borderRadius: "var(--radius-md)",
    background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.14)",
    color: "white", fontSize: 15, fontFamily: "inherit", outline: "none", width: "100%",
  };

  const set = (k) => (e) => {
    setForm({ ...form, [k]: e.target.value });
    setSubmitError("");
  };

  const submit = async (e) => {
    e.preventDefault();
    const err = {};
    if (!form.name.trim()) err.name = "Your name, please.";
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) err.email = "A valid email so I can reply.";
    if (form.message.trim().length < 10) err.message = "A sentence or two about the project.";
    setErrors(err);
    setSubmitError("");
    if (Object.keys(err).length > 0) return;

    setSending(true);
    try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ type: "project", ...form }),
      });

      if (!response.ok) {
        throw new Error("The message could not be sent.");
      }

      setSent(true);
    } catch (error) {
      setSubmitError("Something went wrong sending this. Email me directly for now.");
    } finally {
      setSending(false);
    }
  };

  return (
    <section id="contact" style={{ padding: "88px 0 120px", scrollMarginTop: 60 }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 32px" }}>
        <div style={{
          background: "var(--aubergine-900)", color: "white", borderRadius: "var(--radius-2xl)",
          padding: "64px 56px", position: "relative", overflow: "hidden", boxShadow: "var(--shadow-2xl)",
        }}>
          <div style={{
            position: "absolute", top: -100, right: -80, width: 460, height: 460, borderRadius: "50%", pointerEvents: "none",
            background: "radial-gradient(circle, color-mix(in oklab, var(--site-accent) 22%, transparent) 0%, transparent 70%)",
          }} />
          <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 64, alignItems: "start" }}>
            <div>
              <Eyebrow onDark style={{ marginBottom: 16 }}>Start a project</Eyebrow>
              <h2 style={{ margin: 0, fontSize: "clamp(32px, 4.4vw, 50px)", fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.06, color: "white", maxWidth: 440 }}>
                Tell me what you're building.
              </h2>
              <p style={{ marginTop: 20, fontSize: 17, color: "rgba(255,255,255,0.7)", lineHeight: 1.6, maxWidth: 400 }}>
                The best projects start with a real conversation, not a brief.
                Send a few lines and I'll reply within two business days.
              </p>
              <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 14 }}>
                <a href={"mailto:" + biz.email} style={{ display: "inline-flex", alignItems: "center", gap: 12, color: "white", textDecoration: "none", fontSize: 15 }}>
                  <span style={{ width: 38, height: 38, borderRadius: "var(--radius-md)", background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.12)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                    <Icon name="mail" size={16} color="var(--site-accent)" />
                  </span>
                  {biz.email}
                </a>
                <div style={{ display: "inline-flex", alignItems: "center", gap: 12, color: "rgba(255,255,255,0.7)", fontSize: 15 }}>
                  <span style={{ width: 38, height: 38, borderRadius: "var(--radius-md)", background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.12)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                    <Icon name="pin" size={16} color="var(--site-accent)" />
                  </span>
                  {biz.location}
                </div>
              </div>
            </div>

            {/* form */}
            <div>
              {sent ? (
                <div style={{
                  minHeight: 360, borderRadius: "var(--radius-lg)", border: "1px solid rgba(255,255,255,0.12)",
                  background: "rgba(255,255,255,0.04)", padding: 40, display: "flex", flexDirection: "column",
                  alignItems: "flex-start", justifyContent: "center", gap: 14,
                }}>
                  <span style={{ width: 48, height: 48, borderRadius: 999, background: "var(--success-500)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                    <Icon name="check" size={22} color="white" strokeWidth={2.5} />
                  </span>
                  <h3 style={{ margin: 0, fontSize: 24, fontWeight: 700, letterSpacing: "-0.02em", color: "white" }}>Thanks, {form.name.split(" ")[0]}.</h3>
                  <p style={{ margin: 0, fontSize: 16, color: "rgba(255,255,255,0.7)", lineHeight: 1.6, maxWidth: 360 }}>
                    Your note is in. I'll reply within two business days, usually sooner.
                    Feel free to reply straight to my email in the meantime.
                  </p>
                </div>
              ) : (
                <form onSubmit={submit} noValidate style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                    <Field label="Name" error={errors.name}>
                      <input style={inputStyle} value={form.name} onChange={set("name")} disabled={sending} placeholder="Jordan Avery" />
                    </Field>
                    <Field label="Email" error={errors.email}>
                      <input style={inputStyle} type="email" value={form.email} onChange={set("email")} disabled={sending} placeholder="you@company.com" />
                    </Field>
                  </div>
                  <Field label="Company (optional)">
                    <input style={inputStyle} value={form.company} onChange={set("company")} disabled={sending} placeholder="Where you work" />
                  </Field>
                  <Field label="What are you building?" error={errors.message}>
                    <textarea style={{ ...inputStyle, height: 120, padding: "12px 14px", resize: "vertical", lineHeight: 1.5 }} value={form.message} onChange={set("message")} disabled={sending} placeholder="A few lines about the project, the timeline, and where you're stuck." />
                  </Field>
                  {submitError && <span style={{ fontSize: 13, color: "var(--copper-300)", textAlign: "center" }}>{submitError}</span>}
                  <button type="submit" disabled={sending} style={{
                    height: 50, borderRadius: "var(--radius-md)", border: "none", cursor: sending ? "wait" : "pointer",
                    background: "var(--site-accent)", color: "var(--text-on-accent)", fontSize: 15, fontWeight: 700,
                    fontFamily: "inherit", boxShadow: "var(--site-accent-shadow)", marginTop: 4,
                    display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10, opacity: sending ? 0.78 : 1,
                  }}>
                    {sending ? "Sending..." : "Send it over"}
                    {!sending && <Icon name="arrow" size={16} color="var(--text-on-accent)" />}
                  </button>
                  <span style={{ fontSize: 12.5, color: "rgba(255,255,255,0.5)", textAlign: "center" }}>
                    No newsletters, no sales sequence. Just a reply from me.
                  </span>
                </form>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ───────────────────────────── EIGHTY4 SPOTLIGHT ─────────────────────────────
   The flagship, currently heading to launch. The phone screen below is a faithful
   rebuild of Eighty4's own "Today" home (Geist type, cream + aubergine palette,
   real example content) rather than an invented UI. */
const E84 = { bg: "#ECEBE6", card: "#FFFFFF", ink: "#211C16", dim: "rgba(33,28,22,0.60)", muted: "rgba(33,28,22,0.42)", faint: "rgba(33,28,22,0.27)", hair: "rgba(33,28,22,0.085)", accent: "#8463B0", accentSoft: "rgba(132,99,176,0.12)", amber: "#C68A2E", sans: "'Geist', -apple-system, system-ui, sans-serif", mono: "'Geist Mono', ui-monospace, monospace" };

const E84Ring = ({ size = 42, stroke = 3.5, progress = 0.3, color = "#fff", children }) => {
  const r = (size - stroke) / 2, c = 2 * Math.PI * r;
  return (
    <div style={{ position: "relative", width: size, height: size, flexShrink: 0 }}>
      <svg width={size} height={size} style={{ transform: "rotate(-90deg)" }}>
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="rgba(255,255,255,0.22)" strokeWidth={stroke} />
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={color} strokeWidth={stroke} strokeLinecap="round" strokeDasharray={c} strokeDashoffset={c * (1 - progress)} />
      </svg>
      <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>{children}</div>
    </div>
  );
};

const E84Check = ({ checked, size = 20, color = E84.accent, onDark = false }) => (
  <span style={{
    width: size, height: size, borderRadius: 999, flexShrink: 0,
    border: checked ? "none" : `1.5px solid ${onDark ? "rgba(255,255,255,0.55)" : "rgba(33,28,22,0.25)"}`,
    background: checked ? color : "transparent",
    display: "inline-flex", alignItems: "center", justifyContent: "center",
  }}>
    {checked && <svg width={size * 0.55} height={size * 0.55} viewBox="0 0 16 16"><polyline points="3.5 8 7 11.5 13 4.5" fill="none" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>}
  </span>
);

const E84Flame = ({ size = 11 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" style={{ flexShrink: 0 }}><path d="M9 2c.5 2-1 3-1.8 4.2C6.3 7.6 6 9 7 10c.4-.7.5-1.4 1.2-1.8.3 1.2 1.3 1.7 1.3 3 0 1.6-1.2 2.8-2.7 2.8S4 12.8 4 11.2C4 8 7.2 6.5 7 3.2 7.8 3.6 8.6 2.8 9 2z" fill={E84.amber} /></svg>
);

const Eighty4Mock = () => {
  const habits = [
    { name: "Plan tomorrow before shutdown", streak: 14, done: true },
    { name: "Run or walk", streak: 9, done: true },
    { name: "Phone away after 8pm", streak: 21, done: false },
    { name: "Read 20 minutes", streak: 6, done: false },
  ];
  const W = 360, H = Math.round(360 * 874 / 402);
  return (
    <div style={{ width: W, maxWidth: "100%", margin: "0 auto", filter: "drop-shadow(0 40px 70px rgba(40,30,15,0.28))" }}>
      <div style={{ width: "100%", aspectRatio: `${402} / ${874}`, background: "#1b1a1f", borderRadius: 54, padding: 10, boxSizing: "border-box" }}>
        <div style={{ width: "100%", height: "100%", borderRadius: 44, overflow: "hidden", background: E84.bg, position: "relative", fontFamily: E84.sans, color: E84.ink }}>
          {/* status bar */}
          <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 44, display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 26px", zIndex: 2 }}>
            <span style={{ fontSize: 13, fontWeight: 600 }}>9:41</span>
            <span style={{ display: "inline-flex", gap: 5, alignItems: "center" }}>
              <span style={{ width: 16, height: 9, borderRadius: 2, border: `1px solid ${E84.muted}` }} />
            </span>
          </div>
          <div style={{ position: "absolute", top: 9, left: "50%", transform: "translateX(-50%)", width: 92, height: 26, borderRadius: 999, background: "#1b1a1f", zIndex: 3 }} />

          {/* screen content */}
          <div style={{ position: "absolute", inset: 0, padding: "54px 20px 18px", display: "flex", flexDirection: "column", overflow: "hidden" }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
                <span style={{ fontFamily: E84.mono, fontSize: 10.5, fontWeight: 600, letterSpacing: 0.6, textTransform: "uppercase", color: E84.muted }}>Fri, May 30</span>
                <span style={{ width: 3, height: 3, borderRadius: 2, background: E84.faint }} />
                <span style={{ fontFamily: E84.mono, fontSize: 10.5, fontWeight: 600, letterSpacing: 0.6, textTransform: "uppercase", color: E84.accent }}>Wk 3/12</span>
              </span>
              <span style={{ width: 30, height: 30, borderRadius: 999, border: `1px solid ${E84.hair}`, background: E84.card, display: "inline-flex", alignItems: "center", justifyContent: "center", color: E84.dim }}>
                <Icon name="user" size={14} color={E84.dim} />
              </span>
            </div>

            <div style={{ marginTop: 20 }}>
              <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: "-1.2px", lineHeight: 1.05 }}>Good morning.</div>
              <div style={{ fontSize: 13.5, color: E84.dim, letterSpacing: "-0.2px", marginTop: 4 }}>Advisory growth cycle · your focus today.</div>
            </div>

            {/* mission card */}
            <div style={{ marginTop: 18, background: E84.ink, borderRadius: 20, padding: "18px 18px 16px" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
                <span style={{ fontFamily: E84.mono, fontSize: 10, fontWeight: 600, letterSpacing: 0.7, textTransform: "uppercase", color: "rgba(255,255,255,0.85)" }}>Today's mission</span>
                <div style={{ flex: 1 }} />
                <E84Ring size={38} stroke={3.5} progress={2 / 7} color="#fff"><span style={{ fontFamily: E84.mono, fontSize: 9, fontWeight: 600, color: "rgba(255,255,255,0.85)" }}>2/7</span></E84Ring>
              </div>
              <div style={{ fontSize: 22, lineHeight: 1.22, fontWeight: 600, color: "#fff", letterSpacing: "-0.5px" }}>Finish the proposal for Acme Operations</div>
              <div style={{ marginTop: 16, paddingTop: 14, borderTop: "1px solid rgba(255,255,255,0.1)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 8, background: E84.accent, borderRadius: 999, padding: "7px 13px 7px 8px" }}>
                  <E84Check checked={false} size={18} onDark />
                  <span style={{ color: "#fff", fontSize: 12.5, fontWeight: 600 }}>Mark done</span>
                </span>
                <span style={{ fontFamily: E84.mono, fontSize: 11, color: "rgba(255,255,255,0.5)" }}>67d left</span>
              </div>
            </div>

            {/* next */}
            <div style={{ marginTop: 22, display: "flex", alignItems: "center", gap: 11, paddingBottom: 13, borderBottom: `1px solid ${E84.hair}` }}>
              <span style={{ fontFamily: E84.mono, fontSize: 10.5, fontWeight: 600, letterSpacing: 0.6, textTransform: "uppercase", color: E84.muted }}>Next</span>
              <span style={{ fontFamily: E84.mono, fontSize: 12.5, color: E84.ink, fontWeight: 600 }}>7:00a</span>
              <span style={{ width: 7, height: 7, borderRadius: 4, background: E84.accent }} />
              <span style={{ flex: 1, fontSize: 14, fontWeight: 500, letterSpacing: "-0.2px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>Easy run, 5 miles</span>
            </div>

            {/* habits */}
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", margin: "16px 0 2px" }}>
              <span style={{ fontFamily: E84.mono, fontSize: 10.5, fontWeight: 600, letterSpacing: 0.6, textTransform: "uppercase", color: E84.muted }}>Habits</span>
              <span style={{ fontFamily: E84.mono, fontSize: 11, color: E84.muted }}>2 left</span>
            </div>
            {habits.map((h, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "9px 0", borderBottom: i < habits.length - 1 ? `1px solid ${E84.hair}` : "none" }}>
                <E84Check checked={h.done} size={20} />
                <span style={{ flex: 1, minWidth: 0, fontSize: 14, fontWeight: 500, letterSpacing: "-0.2px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", textDecoration: h.done ? "line-through" : "none", opacity: h.done ? 0.5 : 1 }}>{h.name}</span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 3, fontFamily: E84.mono, fontSize: 11, color: E84.amber, fontWeight: 600 }}><E84Flame size={11} />{h.streak}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

const Eighty4 = () => {
  const [email, setEmail] = useStateB("");
  const [joined, setJoined] = useStateB(false);
  const [err, setErr] = useStateB(false);
  const [joining, setJoining] = useStateB(false);
  const [joinError, setJoinError] = useStateB("");
  const join = async (e) => {
    e.preventDefault();
    setJoinError("");
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
      setErr(true);
      return;
    }

    setErr(false);
    setJoining(true);
    try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ type: "eighty4", email }),
      });

      if (!response.ok) {
        throw new Error("The signup could not be sent.");
      }

      setJoined(true);
    } catch (error) {
      setJoinError("Something went wrong. Email me directly and I'll add you.");
    } finally {
      setJoining(false);
    }
  };
  return (
    <section id="eighty4" style={{ padding: "112px 0", position: "relative", overflow: "hidden", borderTop: "1px solid var(--border)", scrollMarginTop: 60 }}>
      <div style={{
        position: "absolute", top: -160, left: "55%", width: 900, height: 700, pointerEvents: "none",
        background: "radial-gradient(ellipse at center, color-mix(in oklab, var(--pop) 16%, transparent) 0%, transparent 62%)",
      }} />
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 32px", position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 64, alignItems: "center" }}>
          <div>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "5px 14px", marginBottom: 22, borderRadius: "var(--radius-full)", border: "1px solid var(--violet-200)", background: "var(--pop-subtle)", fontSize: 12, fontWeight: 600, letterSpacing: "0.04em", color: "var(--violet-700)" }}>
              <span style={{ width: 7, height: 7, borderRadius: 999, background: "var(--violet-500)" }} />
              Next up · launching 2026
            </div>
            <h2 style={{ margin: 0, fontSize: "clamp(44px, 6vw, 76px)", fontWeight: 800, letterSpacing: "-0.04em", lineHeight: 0.98 }}>
              Eighty4
            </h2>
            <p style={{ marginTop: 14, fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", color: "var(--brand)", maxWidth: 440 }}>
              Finish what matters in 84&nbsp;days.
            </p>
            <p style={{ marginTop: 16, fontSize: 17, lineHeight: 1.65, color: "var(--text-secondary)", maxWidth: 460 }}>
              Most goals die in the gap between someday and today. Eighty4 runs on a
              twelve-week cycle: pick the few things that count, commit for 84 days, and get
              them done. It's the product I'm building next, and the one I'm taking all the way.
            </p>

            {joined ? (
              <div style={{ marginTop: 30, display: "inline-flex", alignItems: "center", gap: 12, padding: "14px 20px", borderRadius: "var(--radius-md)", background: "var(--success-50)", border: "1px solid var(--success-100)" }}>
                <span style={{ width: 28, height: 28, borderRadius: 999, background: "var(--success-500)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name="check" size={14} color="#fff" strokeWidth={2.5} />
                </span>
                <span style={{ fontSize: 15, fontWeight: 600, color: "var(--success-700)" }}>You're on the list. I'll email you at launch.</span>
              </div>
            ) : (
              <form onSubmit={join} noValidate style={{ marginTop: 30, maxWidth: 460 }}>
                <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                  <input
                    value={email} onChange={(e) => { setEmail(e.target.value); setErr(false); setJoinError(""); }}
                    disabled={joining}
                    type="email" placeholder="you@email.com"
                    style={{ flex: "1 1 220px", height: 50, padding: "0 16px", borderRadius: "var(--radius-md)", border: err ? "1px solid var(--danger-500)" : "1px solid var(--border-strong)", background: "var(--surface)", color: "var(--text)", fontSize: 15, fontFamily: "inherit", outline: "none" }}
                  />
                  <button type="submit" disabled={joining} style={{
                    height: 50, padding: "0 22px", borderRadius: "var(--radius-md)", border: "none", cursor: joining ? "wait" : "pointer",
                    background: "var(--pop)", color: "var(--aubergine-900)", fontSize: 15, fontWeight: 700, fontFamily: "inherit",
                    boxShadow: "var(--shadow-violet)", display: "inline-flex", alignItems: "center", gap: 8, whiteSpace: "nowrap", opacity: joining ? 0.78 : 1,
                  }}>
                    {joining ? "Sending..." : "Get early access"}
                    {!joining && <Icon name="arrow" size={16} color="var(--aubergine-900)" />}
                  </button>
                </div>
                <span style={{ display: "block", marginTop: 10, fontSize: 12.5, color: err || joinError ? "var(--danger-700)" : "var(--text-tertiary)" }}>
                  {joinError || (err ? "Enter a valid email and I'll add you." : "No spam. One email when it goes live.")}
                </span>
              </form>
            )}
          </div>
          <Eighty4Mock />
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Approach, About, Contact, Eighty4 });