// JUST — landing page
const { useState, useEffect } = React;
const S = window.Scribble;
const Thread = window.IMessageThread;

const BACKEND = "https://personal-crm-production-7172.up.railway.app";
const ASSISTANT_NUMBER = "+1 (872) 296-4991";

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "paper",
  "headlineVariant": "tagline",
  "doodleIntensity": "medium",
  "showCoffeeStain": true
}/*EDITMODE-END*/;

const PALETTES = {
  paper:  { bg: "#FBF7EE", ink: "#1A1714", red: "#E63946", blue: "#2867D5", yellow: "#FFE166", muted: "#7A736A" },
  legal:  { bg: "#FAF4D8", ink: "#1A1714", red: "#D7263D", blue: "#1F5AA8", yellow: "#F2C94C", muted: "#7A6E4A" },
  graph:  { bg: "#F0F5F1", ink: "#15201A", red: "#D24545", blue: "#2A6BB0", yellow: "#E8C547", muted: "#5E6B62" },
  midnight:{bg: "#15151A", ink: "#F2EDE3", red: "#FF6B7A", blue: "#7DA8FF", yellow: "#FFD964", muted: "#9b958a" },
};

function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const pal = PALETTES[t.palette] || PALETTES.paper;
  const showStain = t.showCoffeeStain;
  const intensity = t.doodleIntensity;

  useEffect(() => {
    const r = document.documentElement;
    Object.entries(pal).forEach(([k, v]) => r.style.setProperty(`--${k}`, v));
    document.body.style.background = pal.bg;
    document.body.style.color = pal.ink;
  }, [t.palette]);

  return (
    <main style={{ minHeight: "100vh", overflow: "hidden", position: "relative" }}>
      <Nav pal={pal} />
      <Hero pal={pal} variant={t.headlineVariant} intensity={intensity} />
      <Marquee pal={pal} />
      <HowItWorks pal={pal} intensity={intensity} />
      <Scenario pal={pal} showStain={showStain} />
      <Waitlist pal={pal} />
      <FootCTA pal={pal} />
      <Footer pal={pal} />

      <window.TweaksPanel title="Tweaks" defaultPosition={{ right: 24, bottom: 24 }}>
        <window.TweakSection title="Palette">
          <window.TweakRadio
            value={t.palette} onChange={v => setTweak("palette", v)}
            options={[
              { value: "paper", label: "Paper" },
              { value: "legal", label: "Legal pad" },
              { value: "graph", label: "Graph" },
              { value: "midnight", label: "Midnight" },
            ]}
          />
        </window.TweakSection>
        <window.TweakSection title="Headline">
          <window.TweakRadio
            value={t.headlineVariant} onChange={v => setTweak("headlineVariant", v)}
            options={[
              { value: "tagline", label: "Tagline trio" },
              { value: "punch", label: "One-punch" },
              { value: "letter", label: "Note to you" },
            ]}
          />
        </window.TweakSection>
        <window.TweakSection title="Doodle intensity">
          <window.TweakRadio
            value={t.doodleIntensity} onChange={v => setTweak("doodleIntensity", v)}
            options={[
              { value: "low", label: "Low" },
              { value: "medium", label: "Medium" },
              { value: "high", label: "Lots" },
            ]}
          />
        </window.TweakSection>
        <window.TweakToggle
          label="Coffee stain"
          value={t.showCoffeeStain}
          onChange={v => setTweak("showCoffeeStain", v)}
        />
      </window.TweaksPanel>
    </main>
  );
}

function Nav({ pal }) {
  return (
    <nav style={{
      position: "relative", zIndex: 5,
      display: "flex", justifyContent: "space-between", alignItems: "center",
      padding: "26px clamp(20px, 5vw, 64px)",
      maxWidth: 1400, margin: "0 auto",
    }}>
      <Logo pal={pal} />
      <div style={{ display: "flex", alignItems: "center", gap: 28 }}>
        <a href="#how" style={navLink}>How it works</a>
        <a href="#story" style={navLink}>The pitch</a>
        <a href="#waitlist" style={{
          ...navLink,
          background: pal.ink, color: pal.bg,
          padding: "10px 18px", borderRadius: 999,
          fontWeight: 500,
        }}>I want in →</a>
      </div>
    </nav>
  );
}
const navLink = { color: "var(--ink)", textDecoration: "none", fontSize: 15, fontWeight: 500 };

function Logo({ pal, big }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "baseline", gap: 1,
      fontFamily: "'Instrument Serif', serif",
      fontSize: big ? 96 : 28,
      fontWeight: 400, fontStyle: "italic",
      color: pal.ink,
      letterSpacing: "-0.02em",
    }}>
      JUST<span style={{ color: pal.red, fontStyle: "italic" }}>.</span>
    </span>
  );
}

function Hero({ pal, variant, intensity }) {
  return (
    <section style={{
      position: "relative",
      maxWidth: 1400, margin: "0 auto",
      padding: "40px clamp(20px, 5vw, 64px) 60px",
      display: "grid", gridTemplateColumns: "minmax(0,1.05fr) minmax(0,0.95fr)",
      gap: "clamp(24px, 5vw, 80px)", alignItems: "center",
    }}>
      <div style={{ position: "relative" }}>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          fontFamily: "'Caveat', cursive", fontSize: 22,
          color: pal.muted, marginBottom: 18,
        }}>
          <span style={{ position: "relative", display: "inline-block", padding: "2px 10px" }}>
            personal assistant. lives in iMessage.
            <S.Underline color={pal.red} strokeWidth={2.5} />
          </span>
        </div>

        {variant === "tagline" && <HeroTagline pal={pal} intensity={intensity} />}
        {variant === "punch"   && <HeroPunch   pal={pal} intensity={intensity} />}
        {variant === "letter"  && <HeroLetter  pal={pal} intensity={intensity} />}

        <p style={{
          marginTop: 32, maxWidth: 520,
          fontSize: 18, lineHeight: 1.55, color: pal.ink,
          fontWeight: 400, opacity: 0.85,
        }}>
          You text it like a friend — voice notes, ramblings, half-thoughts. It builds a
          memory file for every person you mention, and texts you back when it's time to
          follow up. No app. No CRM. No login. <em style={{ fontFamily: "'Instrument Serif', serif", fontSize: 20 }}>Just iMessage.</em>
        </p>

        <div style={{ marginTop: 36, display: "flex", alignItems: "center", gap: 20, flexWrap: "wrap" }}>
          <a href="#waitlist" style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            background: pal.ink, color: pal.bg,
            padding: "16px 26px", borderRadius: 999,
            fontSize: 17, fontWeight: 500, textDecoration: "none",
            boxShadow: `4px 4px 0 ${pal.red}`,
          }}>
            Get on the waitlist
            <span style={{ fontFamily: "'Caveat', cursive", fontSize: 22, marginLeft: 2 }}>→</span>
          </a>
          <span style={{
            fontFamily: "'Caveat', cursive", fontSize: 22, color: pal.muted,
            position: "relative", paddingLeft: 8,
          }}>
            takes 20 seconds, promise
            <S.Arrow color={pal.muted} direction="up-right"
                     style={{ position: "absolute", right: -56, top: -22, width: 50, height: 36 }} />
          </span>
        </div>
      </div>

      <div style={{ position: "relative", minHeight: 540 }}>
        <div style={{
          position: "absolute", top: 12, left: "8%", transform: "rotate(-4deg)",
          width: "85%", maxWidth: 380, opacity: 0.95, filter: "saturate(0.95)",
        }}>
          <Thread
            contact="JUST"
            subtitle="iMessage · just now"
            messages={[
              { from: "me", voice: true, voiceLen: "0:24", time: "Today 10:42" },
              { from: "me", children: <span>met sarah at blue bottle. running ai infra startup, raising series A, ex-stripe. wants intro to marc.</span> },
              { from: "them", children: <span>got it. <b>Sarah Chen</b> — saved. want me to ping you Friday to follow up?</span> },
              { from: "me", children: <span>yes. and remind me she has a kid named oliver.</span> },
              { from: "them", children: <span>noted. 📝</span>, status: "Delivered" },
            ]}
          />
        </div>

        {intensity !== "low" && (
          <div style={{
            position: "absolute", top: 0, right: -10, transform: "rotate(6deg)",
            fontFamily: "'Caveat', cursive", fontSize: 26, color: pal.blue,
            maxWidth: 180, lineHeight: 1.05, textAlign: "left",
          }}>
            voice note →<br/>
            <span style={{ fontSize: 20 }}>(it transcribes)</span>
            <S.Arrow color={pal.blue} direction="down-left" strokeWidth={2}
                     style={{ position: "absolute", left: -50, top: 30, width: 60, height: 80 }} />
          </div>
        )}
        {intensity === "high" && (
          <div style={{
            position: "absolute", bottom: 40, right: 0, transform: "rotate(-3deg)",
            fontFamily: "'Caveat', cursive", fontSize: 24, color: pal.red,
            maxWidth: 200, textAlign: "right",
          }}>
            ↑ it remembers <br/>so you don't have to
          </div>
        )}
      </div>
    </section>
  );
}

function HeroTagline({ pal, intensity }) {
  return (
    <h1 style={{
      fontFamily: "'Instrument Serif', serif",
      fontSize: "clamp(48px, 7.5vw, 104px)",
      lineHeight: 0.98, fontWeight: 400, fontStyle: "italic",
      letterSpacing: "-0.025em",
      color: pal.ink, margin: 0,
    }}>
      <div>
        Just <Word word="met" color={pal.red} kind="circle" /> someone.
      </div>
      <div>
        Just <Word word="had a call" color={pal.blue} kind="underline" />.
      </div>
      <div>
        Just <Word word="need to remember" color={pal.ink} kind="highlight" highlightColor={pal.yellow} />.
      </div>
    </h1>
  );
}

function HeroPunch({ pal }) {
  return (
    <h1 style={{
      fontFamily: "'Instrument Serif', serif",
      fontSize: "clamp(56px, 9vw, 132px)",
      lineHeight: 0.92, fontWeight: 400, fontStyle: "italic",
      letterSpacing: "-0.03em", color: pal.ink, margin: 0,
    }}>
      Text it. <br/>
      It <Word word="remembers" color={pal.red} kind="circle" /> <br/>
      everyone for you.
    </h1>
  );
}

function HeroLetter({ pal }) {
  return (
    <h1 style={{
      fontFamily: "'Instrument Serif', serif",
      fontSize: "clamp(40px, 5.5vw, 76px)",
      lineHeight: 1.05, fontWeight: 400, fontStyle: "italic",
      letterSpacing: "-0.02em", color: pal.ink, margin: 0,
    }}>
      Hey, you <Word word="met" color={pal.red} kind="circle" /> <br/>
      a lot of people this week.<br/>
      Want me to <Word word="remember" color={pal.blue} kind="underline" /> them <br/>
      so you don't have to?
    </h1>
  );
}

function Word({ word, color, kind, highlightColor }) {
  return (
    <span style={{ position: "relative", display: "inline-block", padding: kind === "circle" ? "0.05em 0.35em" : "0 0.05em", whiteSpace: "nowrap" }}>
      {kind === "circle"    && <S.Circle color={color} />}
      {kind === "underline" && <S.Underline color={color} />}
      {kind === "highlight" && <S.Highlight color={highlightColor || "#FFE166"} />}
      <span style={{ position: "relative", color: kind === "circle" ? color : "inherit" }}>{word}</span>
    </span>
  );
}

function Marquee({ pal }) {
  const items = [
    "just met someone", "just had a call", "just left a coffee",
    "just got off zoom", "just need to remember", "just close that loop",
    "just a name", "just a follow-up", "just one nudge",
    "just keep going",
  ];
  const all = [...items, ...items, ...items];
  return (
    <div style={{
      position: "relative",
      borderTop: `1.5px solid ${pal.ink}`,
      borderBottom: `1.5px solid ${pal.ink}`,
      padding: "18px 0",
      overflow: "hidden",
      background: pal.bg,
    }}>
      <div style={{
        display: "flex", gap: 36, whiteSpace: "nowrap",
        animation: "scroll 60s linear infinite",
        fontFamily: "'Instrument Serif', serif", fontStyle: "italic",
        fontSize: 30, color: pal.ink,
      }}>
        {all.map((s, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 36 }}>
            {s}
            <span style={{ color: pal.red, fontFamily: "'Caveat', cursive", fontSize: 32 }}>✱</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function HowItWorks({ pal, intensity }) {
  return (
    <section id="how" style={{
      maxWidth: 1400, margin: "0 auto",
      padding: "100px clamp(20px, 5vw, 64px) 60px",
      position: "relative",
    }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 56, flexWrap: "wrap", gap: 16 }}>
        <h2 style={{
          fontFamily: "'Instrument Serif', serif", fontStyle: "italic",
          fontSize: "clamp(40px, 5vw, 64px)", letterSpacing: "-0.02em",
          margin: 0, fontWeight: 400, color: pal.ink, lineHeight: 1,
        }}>
          Three steps. <span style={{ position: "relative" }}>
            That's it
            <S.Underline color={pal.red} />
          </span>.
        </h2>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 24, color: pal.muted, maxWidth: 260, textAlign: "right" }}>
          (no onboarding flow,<br/>no dashboard tour)
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "clamp(20px, 3vw, 48px)", position: "relative" }}>
        <Step n={1} pal={pal} title="Text JUST" sub="voice or words. mid-walk. mid-uber. half-thoughts welcome.">
          <MiniThread pal={pal} messages={[
            { from: "me", voice: true, voiceLen: "0:18" },
            { from: "me", children: "had drinks w/ omar. wants me to email him a deck." },
          ]}/>
        </Step>

        <Step n={2} pal={pal} title="It builds a memory" sub="every person gets a file. names, jobs, kids, last touchpoint.">
          <MemoryCard pal={pal} />
        </Step>

        <Step n={3} pal={pal} title="It nudges you" sub="when the loop is open and you need to close it. via text. like a friend.">
          <MiniThread pal={pal} messages={[
            { from: "them", children: <>It's been <b>5 days</b>. Did you send Omar that deck?</> },
            { from: "me", children: "ugh you're right" },
            { from: "them", children: "draft below 👇" },
          ]}/>
        </Step>

        {intensity !== "low" && (
          <>
            <S.Arrow color={pal.blue} direction="right" strokeWidth={2.5}
              style={{ position: "absolute", left: "31%", top: 130, width: 80, height: 36 }} />
            <S.Arrow color={pal.red} direction="right" strokeWidth={2.5}
              style={{ position: "absolute", left: "64%", top: 130, width: 80, height: 36 }} />
          </>
        )}
      </div>
    </section>
  );
}

function Step({ n, title, sub, children, pal }) {
  return (
    <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 16 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <S.NumberCircle n={n} color={pal.ink} size={56} strokeWidth={2.5} />
        <h3 style={{
          fontFamily: "'Instrument Serif', serif", fontStyle: "italic",
          fontSize: 32, fontWeight: 400, margin: 0, letterSpacing: "-0.015em",
          color: pal.ink,
        }}>{title}</h3>
      </div>
      <p style={{ margin: "0 0 4px", color: pal.muted, fontSize: 16, lineHeight: 1.45, maxWidth: 360 }}>{sub}</p>
      <div style={{ marginTop: 4 }}>{children}</div>
    </div>
  );
}

function MiniThread({ pal, messages }) {
  return (
    <div style={{
      background: "white",
      borderRadius: 18,
      padding: "14px 14px 12px",
      border: `1px solid rgba(26,23,20,0.08)`,
      boxShadow: "0 12px 30px -16px rgba(26,23,20,0.2)",
      display: "flex", flexDirection: "column", gap: 6,
      fontFamily: "'Inter Tight', system-ui, sans-serif",
    }}>
      {messages.map((m, i) => <window.Bubble key={i} {...m} />)}
    </div>
  );
}

function MemoryCard({ pal }) {
  return (
    <div style={{
      background: "white", borderRadius: 14, padding: 18,
      border: `1px solid rgba(26,23,20,0.1)`,
      boxShadow: "0 12px 30px -16px rgba(26,23,20,0.2)",
      fontFamily: "'Inter Tight', system-ui, sans-serif",
      position: "relative",
    }}>
      <div style={{
        position: "absolute", top: -10, right: 16,
        background: pal.yellow, padding: "4px 12px",
        fontFamily: "'Caveat', cursive", fontSize: 18,
        transform: "rotate(2deg)",
        boxShadow: "1px 2px 0 rgba(26,23,20,0.15)",
      }}>memory file</div>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
        <div style={{
          width: 36, height: 36, borderRadius: "50%",
          background: pal.ink, color: pal.bg,
          display: "grid", placeItems: "center",
          fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontSize: 18,
        }}>OK</div>
        <div>
          <div style={{ fontWeight: 600, fontSize: 16, color: pal.ink }}>Omar Khalil</div>
          <div style={{ fontSize: 12, color: pal.muted }}>Founder · Pell · met Tue 7:42pm</div>
        </div>
      </div>
      <ul style={{
        listStyle: "none", padding: 0, margin: 0,
        display: "flex", flexDirection: "column", gap: 6,
        fontSize: 13.5, color: pal.ink, lineHeight: 1.4,
      }}>
        <li>· raising $4M seed, AI infra</li>
        <li>· son just started kindergarten</li>
        <li>· wants the deck. promised by fri.</li>
        <li>· allergic to oat milk (lol)</li>
      </ul>
      <div style={{
        marginTop: 12, paddingTop: 10,
        borderTop: `1px dashed ${pal.muted}`,
        fontSize: 12, color: pal.muted,
      }}>
        next nudge · <b style={{ color: pal.red }}>fri 9am</b>
      </div>
    </div>
  );
}

function Scenario({ pal, showStain }) {
  return (
    <section id="story" style={{
      position: "relative",
      background: pal.ink, color: pal.bg,
      padding: "120px clamp(20px, 5vw, 64px)",
      overflow: "hidden",
    }}>
      <div style={{ maxWidth: 1300, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(40px, 6vw, 100px)", alignItems: "center", position: "relative" }}>
        {showStain && (
          <S.CoffeeStain color={pal.bg}
            style={{ position: "absolute", top: -40, left: "44%", width: 280, height: 280, opacity: 0.5 }} />
        )}

        <div style={{ position: "relative" }}>
          <div style={{
            fontFamily: "'Caveat', cursive", fontSize: 28, color: pal.yellow,
            transform: "rotate(-2deg)", marginBottom: 18,
            display: "inline-block",
          }}>
            ↓ a tuesday, 2:47pm
          </div>
          <h2 style={{
            fontFamily: "'Instrument Serif', serif", fontStyle: "italic",
            fontSize: "clamp(36px, 4.5vw, 60px)",
            fontWeight: 400, lineHeight: 1.05, letterSpacing: "-0.02em",
            margin: "0 0 28px", color: pal.bg,
          }}>
            You walk out of <Word word="coffee" color={pal.yellow} kind="highlight" highlightColor="rgba(255,225,102,0.35)" /> with someone <br/>
            who could change everything.<br/>
            You have <Word word="30 seconds" color={pal.red} kind="underline" /> <br/>
            before your next call.
          </h2>
          <p style={{
            fontSize: 19, lineHeight: 1.55, opacity: 0.85, maxWidth: 500,
            color: pal.bg, fontWeight: 400,
          }}>
            Their kid's name. The book they recommended. The intro they want.
            The follow-up you promised by Friday. <em style={{ fontFamily: "'Instrument Serif', serif" }}>Right now,</em> it's all in your head.
            By tonight, it won't be.
          </p>
          <p style={{
            marginTop: 24, fontSize: 19, lineHeight: 1.55,
            color: pal.bg, fontWeight: 500, maxWidth: 500,
          }}>
            So while you're walking, you do the only thing
            you have time for. You text JUST.
          </p>

          <div style={{
            marginTop: 36, fontFamily: "'Caveat', cursive", fontSize: 28,
            color: pal.yellow, position: "relative", display: "inline-block",
          }}>
            → what that looks like
          </div>
        </div>

        <div style={{ position: "relative", display: "flex", justifyContent: "center" }}>
          <div style={{ transform: "rotate(2deg)", position: "relative" }}>
            <Thread
              contact="JUST"
              subtitle="iMessage · 2:47pm"
              messages={[
                { from: "me", voice: true, voiceLen: "0:34", time: "Today 2:47 PM" },
                { from: "them", children: <>Got it. <b>Priya Shah</b> — VP Eng at Volt, two kids (Asha, Rohan), recommended <i>Ender's Game</i>. You promised the intro to Marc by Friday.</> },
                { from: "them", children: <>Anything else before your 3pm?</> },
                { from: "me", children: "remind me she said her dad's sick." },
                { from: "them", children: "Saved. Will check in next time you mention her.", status: "Delivered 2:48 PM" },
              ]}
            />
            <div style={{
              position: "absolute", top: -38, right: -20,
              fontFamily: "'Caveat', cursive", fontSize: 28, color: pal.yellow,
              transform: "rotate(8deg)",
            }}>
              34 seconds. <br/>
              <span style={{ fontSize: 22 }}>walking, btw.</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Waitlist({ pal }) {
  const [submitted, setSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");

  const onSubmit = async e => {
    e.preventDefault();
    if (!email || !phone) return;
    setLoading(true);
    try {
      await fetch(`${BACKEND}/api/waitlist`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, phone_number: phone }),
      });
    } catch (_) {}
    setLoading(false);
    setSubmitted(true);
  };

  return (
    <section id="waitlist" style={{
      maxWidth: 920, margin: "0 auto",
      padding: "120px clamp(20px, 5vw, 64px) 60px",
      position: "relative",
    }}>
      <div style={{ textAlign: "center", marginBottom: 40, position: "relative" }}>
        <div style={{
          fontFamily: "'Caveat', cursive", fontSize: 26, color: pal.muted,
          marginBottom: 12,
        }}>
          ✱ ok let's do this
        </div>
        <h2 style={{
          fontFamily: "'Instrument Serif', serif", fontStyle: "italic",
          fontSize: "clamp(48px, 6vw, 84px)",
          fontWeight: 400, letterSpacing: "-0.025em",
          margin: 0, lineHeight: 0.98, color: pal.ink,
        }}>
          Get on the <Word word="waitlist" color={pal.red} kind="circle" />.
        </h2>
        <p style={{
          marginTop: 20, fontSize: 18, color: pal.muted, maxWidth: 540, margin: "20px auto 0",
        }}>
          We're letting people in slowly. Drop your email and the phone number you text from
          (it has to be the iMessage one). We'll text you when it's your turn.
        </p>
      </div>

      {!submitted ? (
        <form onSubmit={onSubmit} style={{
          background: "white", borderRadius: 24,
          padding: "clamp(20px, 4vw, 40px)",
          border: `1.5px solid ${pal.ink}`,
          boxShadow: `8px 8px 0 ${pal.ink}`,
          display: "flex", flexDirection: "column", gap: 18,
          position: "relative",
        }}>
          <div style={{
            position: "absolute", top: -18, left: 28,
            background: pal.yellow, padding: "4px 14px",
            fontFamily: "'Caveat', cursive", fontSize: 22, color: pal.ink,
            transform: "rotate(-2deg)",
            border: `1.5px solid ${pal.ink}`,
          }}>fill in 2 fields →</div>

          <Field label="email" pal={pal}>
            <input
              type="email" required value={email} onChange={e => setEmail(e.target.value)}
              placeholder="you@hello.com"
              style={inputStyle(pal)}
            />
          </Field>

          <Field label="iMessage number" pal={pal} hint="(the one your friends text you on)">
            <input
              type="tel" required value={phone} onChange={e => setPhone(e.target.value)}
              placeholder="+1 (415) 555-0134"
              style={inputStyle(pal)}
            />
          </Field>

          <button type="submit" disabled={loading} style={{
            marginTop: 8,
            background: loading ? pal.muted : pal.ink, color: pal.bg,
            border: "none", padding: "20px 28px",
            borderRadius: 999, fontSize: 19, fontWeight: 500,
            cursor: loading ? "not-allowed" : "pointer",
            display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 12,
            fontFamily: "'Inter Tight', system-ui, sans-serif",
          }}>
            {loading ? "Saving your spot..." : "I want in"}
            {!loading && <span style={{ fontFamily: "'Caveat', cursive", fontSize: 26 }}>→</span>}
          </button>

          <div style={{
            display: "flex", gap: 18, fontSize: 13, color: pal.muted,
            justifyContent: "center", flexWrap: "wrap",
          }}>
            <span>· no spam, ever</span>
            <span>· we never sell your number</span>
            <span>· takes 20 seconds</span>
          </div>
        </form>
      ) : (
        <div style={{
          background: pal.ink, color: pal.bg, borderRadius: 24,
          padding: "44px 36px", textAlign: "center",
          boxShadow: `8px 8px 0 ${pal.red}`,
        }}>
          <div style={{ fontFamily: "'Caveat', cursive", fontSize: 34, color: pal.yellow, marginBottom: 8 }}>
            ✱ you're in line
          </div>
          <h3 style={{
            fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontSize: 38,
            fontWeight: 400, margin: 0, letterSpacing: "-0.02em",
          }}>
            We'll text {phone} when it's your turn.
          </h3>
          <p style={{ marginTop: 12, opacity: 0.75 }}>
            Save <b>{ASSISTANT_NUMBER}</b> in your contacts. So you know it's us.
          </p>
        </div>
      )}
    </section>
  );
}

const inputStyle = (pal) => ({
  width: "100%",
  border: "none",
  borderBottom: `2px solid ${pal.ink}`,
  background: "transparent",
  padding: "14px 4px 10px",
  fontSize: 22,
  fontFamily: "'Instrument Serif', serif",
  fontStyle: "italic",
  color: pal.ink,
  outline: "none",
  letterSpacing: "-0.01em",
});

function Field({ label, hint, children, pal }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
      <span style={{
        fontFamily: "'Caveat', cursive", fontSize: 22, color: pal.muted,
        display: "flex", gap: 10, alignItems: "baseline",
      }}>
        {label}
        {hint && <span style={{ fontSize: 16, opacity: 0.7 }}>{hint}</span>}
      </span>
      {children}
    </label>
  );
}

function FootCTA({ pal }) {
  return (
    <section style={{
      position: "relative",
      maxWidth: 1300, margin: "60px auto 0",
      padding: "100px clamp(20px, 5vw, 64px) 60px",
      borderTop: `1.5px dashed ${pal.muted}`,
      textAlign: "center",
    }}>
      <h2 style={{
        fontFamily: "'Instrument Serif', serif", fontStyle: "italic",
        fontSize: "clamp(44px, 6vw, 88px)", fontWeight: 400,
        letterSpacing: "-0.025em", lineHeight: 0.98, margin: 0, color: pal.ink,
      }}>
        Stop letting people <br/>
        <Word word="slip through" color={pal.red} kind="underline" /> the cracks.
      </h2>
      <p style={{
        marginTop: 22, fontSize: 19, color: pal.muted,
        maxWidth: 580, margin: "22px auto 0",
      }}>
        Every name you forget is a deal, a friendship, an intro you'll never get back.
        Get on the list. We'll text you.
      </p>
      <a href="#waitlist" style={{
        display: "inline-flex", alignItems: "center", gap: 14,
        marginTop: 36,
        background: pal.ink, color: pal.bg,
        padding: "20px 32px", borderRadius: 999,
        fontSize: 20, fontWeight: 500, textDecoration: "none",
        boxShadow: `5px 5px 0 ${pal.red}`,
      }}>
        I want in
        <span style={{ fontFamily: "'Caveat', cursive", fontSize: 28 }}>→</span>
      </a>
      <div style={{
        marginTop: 28, fontFamily: "'Caveat', cursive", fontSize: 24,
        color: pal.muted, display: "inline-block", position: "relative",
      }}>
        or just text us at <span style={{ color: pal.blue, textDecoration: "underline" }}>{ASSISTANT_NUMBER}</span>
      </div>
    </section>
  );
}

function Footer({ pal }) {
  return (
    <footer style={{
      maxWidth: 1300, margin: "0 auto",
      padding: "40px clamp(20px, 5vw, 64px) 80px",
      borderTop: `1px solid rgba(26,23,20,0.1)`,
      display: "flex", justifyContent: "space-between", flexWrap: "wrap",
      gap: 20, alignItems: "baseline",
      fontSize: 14, color: pal.muted,
    }}>
      <Logo pal={pal} />
      <div style={{ display: "flex", gap: 24 }}>
        <a href="#" style={{ color: pal.muted, textDecoration: "none" }}>Privacy</a>
        <a href="#" style={{ color: pal.muted, textDecoration: "none" }}>Terms</a>
        <a href="mailto:hi@just.fyi" style={{ color: pal.muted, textDecoration: "none" }}>hi@just.fyi</a>
      </div>
      <div style={{ fontFamily: "'Caveat', cursive", fontSize: 18 }}>made with too much coffee · 2026</div>
    </footer>
  );
}

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