/* Landing / Home page — structured editorial layout */

// The 60-second feature-montage advert. Paste the YouTube ID once it's up.
const TOUR_VIDEO = { yt: "", title: "My Crafty Stash — the 60-second tour", duration: "0:55", chapter: "Overview", c: "var(--accent-soft)", index: 0 };

function HomePage({ go }) {
  const [tour, setTour] = React.useState(false);
  const openTour = () => setTour(true);
  return (
    <div className="page" data-screen-label="01 Landing">
      <Hero go={go} openTour={openTour} />
      <KeyStats />
      <AppPreview />
      <Features />
      <ColorMatchShowcase />
      <YourDataYours />
      <ClosingCTA go={go} />
      {tour && (
        <VideoModal
          video={TOUR_VIDEO}
          videos={[TOUR_VIDEO]}
          onClose={() => setTour(false)}
          onPlay={() => {}}
        />
      )}
    </div>
  );
}

function Hero({ go, openTour }) {
  return (
    <section className="section" style={{ paddingTop: 72, paddingBottom: 56 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.15fr .85fr", gap: 64, alignItems: "center" }} className="hero-grid">
          <div>
            <div className="kicker" style={{ marginBottom: 18 }}>
              v1.0 &nbsp;·&nbsp; Windows 10/11 &nbsp;·&nbsp; Free
            </div>
            <h1 style={{ marginBottom: 22, lineHeight: 1.02 }}>
              A quiet little catalog<br/>
              for your <em style={{ fontStyle: "italic", color: "var(--accent-deep)", fontWeight: 700 }}>noisy</em> craft room.
            </h1>
            <p className="lead" style={{ maxWidth: 520, marginBottom: 32 }}>
              My Crafty Stash helps paper crafters keep track of every stamp,
              die, ink pad, and sheet of cardstock. Made by a crafter who got
              tired of buying duplicates.
            </p>
            <div className="row" style={{ gap: 12 }}>
              <button className="btn btn-lg" onClick={() => go("download")}>
                <DownloadIcon /> Download for Windows
              </button>
              <button className="btn secondary btn-lg" onClick={openTour}>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" style={{ marginRight: 2 }}><path d="M8 5v14l11-7z"/></svg>
                Watch the 60-second tour
              </button>
            </div>
            <div style={{ display: "flex", gap: 18, marginTop: 22, flexWrap: "wrap" }}>
              <span className="sticker"><span className="dot" /> No account needed</span>
              <span className="sticker"><span className="dot" style={{ background: "var(--mint)" }} /> Works offline</span>
            </div>
          </div>
          <HeroVisual openTour={openTour} />
        </div>
      </div>
    </section>
  );
}

function HeroVisual({ openTour }) {
  return (
    <div style={{
      position: "relative",
      background: "var(--paper-2)",
      border: "1px solid var(--line-soft)",
      borderRadius: 16,
      padding: 24,
      aspectRatio: "1 / 1",
      display: "flex", flexDirection: "column",
      gap: 16,
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span className="kicker">Stamps · 142 sets</span>
        <span className="kicker" style={{ color: "var(--accent-deep)" }}>1,284 items</span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8, flex: 1 }}>
        {[
          { c: "var(--mint)",        t: "Floral Wishes",      n: "MFT-2104", k: "F" },
          { c: "var(--butter)",      t: "Birthday Banners",   n: "AT-0319",  k: "B" },
          { c: "var(--sky)",         t: "Tiny Sentiments",    n: "SSS-1101", k: "T" },
          { c: "var(--accent-soft)", t: "Garden Friends",     n: "PT-7720",  k: "G" },
          { c: "var(--lilac)",       t: "Watercolor Kraft",   n: "NB-0440",  k: "W" },
        ].map((r, i) => (
          <div key={i} style={{
            display: "flex", alignItems: "center", gap: 12,
            padding: "10px 12px", border: "1px solid var(--line-soft)",
            borderRadius: 10, background: "var(--paper)",
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: 6,
              background: r.c, display: "grid", placeItems: "center",
              fontFamily: "var(--display-font)", fontSize: 14, fontWeight: 700,
              color: "var(--ink)",
            }}>{r.k}</div>
            <div style={{ flex: 1, fontSize: "0.92rem", fontWeight: 500 }}>{r.t}</div>
            <span className="kicker">{r.n}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function KeyStats() {
  const stats = [
    { n: "1", k: "platform", v: "Windows" },
    { n: "0", k: "subscriptions", v: "Always free" },
    { n: "1 file", k: "your data", v: "On your computer" },
    { n: "6", k: "tools in one", v: "All in one place" },
  ];
  return (
    <section style={{ padding: "0 0 8px" }}>
      <div className="container">
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
          borderTop: "1px solid var(--line-soft)",
          borderBottom: "1px solid var(--line-soft)",
        }} className="stats-row">
          {stats.map((s, i) => (
            <div key={i} style={{
              padding: "24px 28px",
              borderRight: i < 3 ? "1px solid var(--line-soft)" : 0,
            }}>
              <div style={{
                fontFamily: "var(--display-font)", fontSize: "2rem",
                fontWeight: 700, lineHeight: 1, marginBottom: 6,
              }}>{s.n}</div>
              <div className="kicker" style={{ marginBottom: 4 }}>{s.k}</div>
              <div style={{ fontSize: "0.95rem", color: "var(--ink-2)" }}>{s.v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function DownloadIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3v12m0 0l-5-5m5 5l5-5"/>
      <path d="M5 21h14"/>
    </svg>
  );
}

function AppPreview() {
  return (
    <section className="section" style={{ paddingTop: 72 }}>
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Inside the app</div>
          <h2>Six tools in one tidy file. Find anything in a second.</h2>
        </div>
        <div style={{
          background: "var(--paper)",
          border: "1px solid var(--line)",
          borderRadius: 14,
          overflow: "hidden",
          boxShadow: "var(--shadow-lg)",
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "12px 16px", background: "var(--paper-2)", borderBottom: "1px solid var(--line-soft)" }}>
            <div style={{ width: 11, height: 11, borderRadius: 99, background: "#cf6960" }} />
            <div style={{ width: 11, height: 11, borderRadius: 99, background: "#d6b16a" }} />
            <div style={{ width: 11, height: 11, borderRadius: 99, background: "#9bbe9f" }} />
            <div className="kicker" style={{ marginLeft: 12 }}>
              My Crafty Stash · stash.mcs
            </div>
          </div>
          <AppMockup />
        </div>
      </div>
    </section>
  );
}

function AppMockup() {
  const [tab, setTab] = React.useState("home");
  const [tool, setTool] = React.useState(null);
  const tabs = [
    { id: "home", label: "Home" },
    { id: "inventory", label: "Inventory", count: 1284 },
    { id: "projects", label: "Projects", count: 87 },
    { id: "wishlist", label: "Wishlist", count: 23 },
  ];
  const tools = [
    { id: "wizard", label: "Card Build Wizard" },
    { id: "colormatch", label: "Color Match" },
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", minHeight: 520, position: "relative" }}>
      <div style={{ borderRight: "1px solid var(--line-soft)", padding: "20px 14px", background: "var(--paper-2)" }}>
        <div className="kicker" style={{ marginBottom: 10, padding: "0 8px" }}>STASH</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 2, marginBottom: 24 }}>
          {tabs.map(t => (
            <button key={t.id} onClick={() => { setTab(t.id); setTool(null); }} style={{
              all: "unset", cursor: "pointer",
              padding: "8px 12px", borderRadius: 6,
              background: tab === t.id && !tool ? "var(--ink)" : "transparent",
              color: tab === t.id && !tool ? "var(--paper)" : "var(--ink-2)",
              display: "flex", justifyContent: "space-between", alignItems: "center",
              fontSize: "0.92rem", fontWeight: 500,
            }}>
              <span>{t.label}</span>
              {t.count && (
                <span className="kicker" style={{ fontSize: 10, color: tab === t.id && !tool ? "rgba(250,247,241,.7)" : "var(--ink-3)" }}>{t.count}</span>
              )}
            </button>
          ))}
        </div>
        <div className="kicker" style={{ marginBottom: 10, padding: "0 8px" }}>TOOLS</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
          {tools.map(t => (
            <button
              key={t.id}
              onClick={() => setTool(t.id)}
              style={{
                all: "unset", cursor: "pointer",
                padding: "8px 12px", borderRadius: 6, fontSize: "0.92rem", fontWeight: 500,
                background: tool === t.id ? "var(--ink)" : "transparent",
                color: tool === t.id ? "var(--paper)" : "var(--ink-2)",
              }}
            >
              {t.label}
            </button>
          ))}
        </div>
      </div>
      <div style={{ padding: "24px 28px", position: "relative" }}>
        {tool === null ? (
          <>
            {tab === "home" && <DashboardView />}
            {tab === "inventory" && <SuppliesView />}
            {tab === "projects" && <ProjectsView />}
            {tab === "wishlist" && <WishlistView />}
          </>
        ) : (
          <ToolView tool={tool} onClose={() => setTool(null)} />
        )}
      </div>
    </div>
  );
}

function ToolView({ tool, onClose }) {
  const titles = {
    wizard: "Card Build Wizard",
    colormatch: "Color Match",
  };
  return (
    <>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
        <div>
          <h3 style={{ marginBottom: 2 }}>{titles[tool]}</h3>
          <span className="kicker">tool</span>
        </div>
        <button onClick={onClose} className="btn secondary" style={{ padding: "6px 12px", fontSize: "0.85rem" }}>← Back</button>
      </div>
      {tool === "wizard" && <CardWizardTool />}
      {tool === "colormatch" && <ColorMatchTool />}
    </>
  );
}

function CardWizardTool() {
  const [step, setStep] = React.useState(0);
  const steps = ["Size", "Cardstock", "Focal", "Sentiment"];
  const [choice, setChoice] = React.useState({ size: "A2 (4.25 × 5.5)", stock: "Kraft 110lb", focal: "Garden Friends", sentiment: "celebrate you today" });
  const options = {
    0: { key: "size",      list: ["A2 (4.25 × 5.5)", "A7 (5 × 7)", "Square (5.5 × 5.5)", "Slimline (3.5 × 8.5)"] },
    1: { key: "stock",     list: ["Kraft 110lb", "Whisper White", "Watercolor Kraft", "Glossy White"] },
    2: { key: "focal",     list: ["Garden Friends", "Floral Wishes", "Birthday Banners", "Tiny Sentiments"] },
    3: { key: "sentiment", list: ["celebrate you today", "happy birthday wishes", "thinking of you", "you've got this"] },
  };
  const cur = options[step];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 28 }}>
      <div>
        {/* Stepper */}
        <div style={{ display: "flex", gap: 6, marginBottom: 18 }}>
          {steps.map((s, i) => (
            <div key={s} style={{ flex: 1, textAlign: "center" }}>
              <div style={{
                height: 4, borderRadius: 99, marginBottom: 6,
                background: i <= step ? "var(--accent)" : "var(--line-soft)",
              }} />
              <span className="kicker" style={{ color: i === step ? "var(--accent-deep)" : "var(--ink-3)" }}>{s}</span>
            </div>
          ))}
        </div>
        <div className="kicker" style={{ marginBottom: 10 }}>Step {step + 1} · pick your {cur.key}</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {cur.list.map((opt) => {
            const active = choice[cur.key] === opt;
            return (
              <button
                key={opt}
                onClick={() => setChoice({ ...choice, [cur.key]: opt })}
                style={{
                  all: "unset", cursor: "pointer",
                  padding: "12px 14px", borderRadius: 8,
                  border: "1px solid " + (active ? "var(--ink)" : "var(--line-soft)"),
                  background: active ? "var(--paper-2)" : "var(--paper)",
                  fontSize: "0.92rem", fontWeight: 500,
                  display: "flex", justifyContent: "space-between", alignItems: "center",
                }}
              >
                {opt}
                {active && <span className="kicker" style={{ color: "var(--accent-deep)" }}>✓</span>}
              </button>
            );
          })}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 18 }}>
          <button className="btn secondary" disabled={step === 0} onClick={() => setStep(step - 1)} style={{ opacity: step === 0 ? 0.4 : 1, padding: "8px 14px", fontSize: "0.85rem" }}>← Back</button>
          {step < steps.length - 1
            ? <button className="btn" onClick={() => setStep(step + 1)} style={{ padding: "8px 14px", fontSize: "0.85rem" }}>Next →</button>
            : <button className="btn" style={{ padding: "8px 14px", fontSize: "0.85rem" }}>Save as project</button>}
        </div>
      </div>
      {/* Live preview */}
      <div>
        <div className="kicker" style={{ marginBottom: 10 }}>Preview</div>
        <div style={{
          aspectRatio: "0.77", background: "var(--paper)",
          border: "1px solid var(--line)", borderRadius: 8,
          boxShadow: "var(--shadow)", padding: 16,
          display: "flex", flexDirection: "column",
        }}>
          <div style={{
            flex: 1, borderRadius: 6,
            background: choice.stock.includes("Kraft") ? "#cbb893" : choice.stock.includes("Watercolor") ? "var(--sky)" : "var(--paper-2)",
            border: "1px solid var(--line-soft)",
            display: "flex", flexDirection: "column",
            alignItems: "center", justifyContent: "center", gap: 14, padding: 16,
          }}>
            <div style={{
              width: "60%", aspectRatio: "1.3", borderRadius: 6,
              background: "var(--mint)", border: "1px solid var(--line)",
              display: "grid", placeItems: "center",
              fontFamily: "var(--display-font)", fontWeight: 700, fontSize: 13,
            }}>{choice.focal}</div>
            <div style={{ fontFamily: "var(--display-font)", fontStyle: "italic", fontSize: 14, textAlign: "center" }}>
              "{choice.sentiment}"
            </div>
          </div>
        </div>
        <div className="kicker" style={{ marginTop: 10, lineHeight: 1.7 }}>
          {choice.size}<br/>{choice.stock} · {choice.focal}
        </div>
      </div>
    </div>
  );
}

function ColorMatchTool() {
  const swatches = [
    { name: "Coral", hex: "#d8543a" },
    { name: "Marigold", hex: "#e0a83a" },
    { name: "Sage", hex: "#7fa07f" },
    { name: "Sky", hex: "#7aa7cc" },
    { name: "Lilac", hex: "#a890c8" },
    { name: "Kraft", hex: "#c0a878" },
  ];
  const [sel, setSel] = React.useState(swatches[0]);
  // Synthetic "matching supplies" keyed by selected swatch.
  const library = {
    Coral:    [["Coral cardstock", "NB-CORAL", "cardstock"], ["Poppy ink pad", "RG-INK-31", "ink"], ["Sunset blend", "AT-INK-08", "ink"]],
    Marigold: [["Marigold cardstock", "NB-MGD", "cardstock"], ["Honey ink pad", "RG-INK-12", "ink"], ["Golden glow", "AT-INK-21", "ink"]],
    Sage:     [["Sage cardstock", "NB-SAGE", "cardstock"], ["Olive ink pad", "RG-INK-44", "ink"], ["Fern blend", "AT-INK-15", "ink"]],
    Sky:      [["Sky cardstock", "NB-SKY", "cardstock"], ["Ocean ink pad", "RG-INK-07", "ink"], ["Denim wash", "AT-INK-19", "ink"]],
    Lilac:    [["Lilac cardstock", "NB-LILAC", "cardstock"], ["Wisteria ink pad", "RG-INK-28", "ink"], ["Plum blend", "AT-INK-33", "ink"]],
    Kraft:    [["Kraft 110lb", "NB-110K", "cardstock"], ["Coffee ink pad", "RG-INK-02", "ink"], ["Walnut stain", "AT-INK-40", "ink"]],
  };
  const matches = library[sel.name] || [];
  return (
    <div>
      <div className="kicker" style={{ marginBottom: 12 }}>Pick a color — see every coordinating supply you own</div>
      <div style={{ display: "flex", gap: 8, marginBottom: 20, flexWrap: "wrap" }}>
        {swatches.map((s) => (
          <button
            key={s.name}
            onClick={() => setSel(s)}
            aria-label={s.name}
            style={{
              width: 44, height: 44, borderRadius: 10, cursor: "pointer",
              background: s.hex,
              border: "2px solid " + (sel.name === s.name ? "var(--ink)" : "transparent"),
              boxShadow: sel.name === s.name ? "0 0 0 2px var(--paper), 0 0 0 4px var(--ink)" : "0 1px 2px rgba(0,0,0,.1)",
            }}
          />
        ))}
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
        <div style={{ width: 20, height: 20, borderRadius: 5, background: sel.hex, border: "1px solid var(--line)" }} />
        <div style={{ fontWeight: 600 }}>{sel.name}</div>
        <span className="kicker">{matches.length} coordinating supplies</span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {matches.map(([t, n, kind], i) => (
          <div key={i} style={{ padding: "12px 14px", border: "1px solid var(--line-soft)", borderRadius: 8, background: "var(--paper)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <div style={{ width: 28, height: 28, borderRadius: 6, background: sel.hex, border: "1px solid var(--line-soft)" }} />
              <div>
                <div style={{ fontWeight: 500 }}>{t}</div>
                <div className="kicker" style={{ marginTop: 4 }}>{n}</div>
              </div>
            </div>
            <span className="kicker" style={{ padding: "4px 10px", borderRadius: 99, background: "var(--paper-2)" }}>{kind}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function SuppliesView() {
  const items = [
    { c: "var(--mint)",        t: "Floral Wishes",     n: "MFT-2104",   q: "Stamp set · 22 stamps" },
    { c: "var(--butter)",      t: "Birthday Banners",  n: "AT-0319",    q: "Die set · 8 dies" },
    { c: "var(--sky)",         t: "Tiny Sentiments",   n: "SSS-1101",   q: "Stamp set · 35 stamps" },
    { c: "var(--accent-soft)", t: "Garden Friends",    n: "PT-7720",    q: "Stamp set · 14 stamps" },
    { c: "var(--lilac)",       t: "Watercolor Kraft",  n: "NB-0440",    q: "Cardstock · 12 sheets" },
    { c: "var(--mint)",        t: "Black Onyx Ink",    n: "RG-INK-22",  q: "Ink pad · 3 in stock" },
  ];
  return (
    <>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
        <div>
          <h3 style={{ marginBottom: 2 }}>Inventory</h3>
          <span className="kicker">1,284 items · sorted by recently added</span>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <input style={{
            padding: "8px 12px", border: "1px solid var(--line-soft)",
            borderRadius: 8, background: "var(--paper)", fontSize: "0.85rem",
            fontFamily: "inherit", width: 220,
          }} placeholder="Search inventory…" defaultValue="birthday" />
          <button style={{
            padding: "8px 14px", border: "1px solid var(--line)",
            borderRadius: 8, background: "var(--ink)", color: "var(--paper)",
            fontSize: "0.85rem", fontWeight: 500, cursor: "pointer", fontFamily: "inherit",
          }}>+ Add</button>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
        {items.map((it, i) => (
          <div key={i} style={{
            border: "1px solid var(--line-soft)", borderRadius: 10,
            overflow: "hidden", background: "var(--paper)",
          }}>
            <div style={{
              height: 100, background: it.c,
              borderBottom: "1px solid var(--line-soft)",
            }} />
            <div style={{ padding: "10px 14px" }}>
              <div style={{ fontSize: "0.92rem", fontWeight: 500 }}>{it.t}</div>
              <div className="kicker" style={{ fontSize: 10, marginTop: 4 }}>{it.n}</div>
              <div style={{ fontSize: "0.82rem", color: "var(--ink-2)", marginTop: 6 }}>{it.q}</div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

function ProjectsView() {
  const projects = [
    { c: "var(--mint)",   t: "Mom's birthday card",   d: "Mar 14, 2026" },
    { c: "var(--butter)", t: "Thank-you set of 6",    d: "Mar 02, 2026" },
    { c: "var(--lilac)",  t: "Wedding RSVP cards",    d: "Feb 22, 2026" },
    { c: "var(--sky)",    t: "Holiday album spread",  d: "Dec 18, 2025" },
  ];
  return (
    <>
      <h3 style={{ marginBottom: 4 }}>Projects</h3>
      <span className="kicker" style={{ display: "block", marginBottom: 18 }}>87 makes · linked to supplies</span>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 14 }}>
        {projects.map((p, i) => (
          <div key={i} style={{
            border: "1px solid var(--line-soft)", borderRadius: 10,
            overflow: "hidden", background: "var(--paper)",
          }}>
            <div style={{ height: 140, background: p.c }} />
            <div style={{ padding: "12px 14px" }}>
              <div style={{ fontWeight: 500 }}>{p.t}</div>
              <div className="kicker" style={{ marginTop: 4 }}>{p.d}</div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

function DashboardView() {
  return (
    <>
      <h3 style={{ marginBottom: 4 }}>Welcome back</h3>
      <span className="kicker" style={{ display: "block", marginBottom: 18 }}>Wednesday · 4 things need your eye</span>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 18 }}>
        {[
          { n: "1,284", k: "items in stash" },
          { n: "87", k: "projects saved" },
          { n: "23", k: "on wishlist" },
        ].map((s, i) => (
          <div key={i} style={{ padding: "16px 18px", border: "1px solid var(--line-soft)", borderRadius: 10, background: "var(--paper)" }}>
            <div style={{ fontFamily: "var(--display-font)", fontSize: "1.6rem", fontWeight: 700, lineHeight: 1, marginBottom: 6 }}>{s.n}</div>
            <div className="kicker">{s.k}</div>
          </div>
        ))}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <div style={{ border: "1px solid var(--line-soft)", borderRadius: 10, padding: 16 }}>
          <div className="kicker" style={{ marginBottom: 12 }}>Recent projects</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {[["var(--mint)","Mom's birthday card"],["var(--butter)","Thank-you set of 6"],["var(--lilac)","Wedding RSVPs"]].map(([c,t],i)=>(
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <div style={{ width: 28, height: 28, borderRadius: 6, background: c, border: "1px solid var(--line-soft)" }} />
                <span style={{ fontSize: "0.9rem", fontWeight: 500 }}>{t}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ border: "1px solid var(--line-soft)", borderRadius: 10, padding: 16 }}>
          <div className="kicker" style={{ marginBottom: 12 }}>Running low</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {[["Black Onyx ink","1 left"],["Versamark","1 left"],["Whisper White","4 left"]].map(([t,q],i)=>(
              <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{ fontSize: "0.9rem", fontWeight: 500 }}>{t}</span>
                <span className="kicker" style={{ color: "var(--accent-deep)" }}>{q}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

function WishlistView() {
  const items = [
    { t: "Pinkfresh — Spring Meadow", n: "PF-2204", owned: false, price: "$18" },
    { t: "Lawn Fawn — Tiny Spring", n: "LF-1190", owned: false, price: "$12" },
    { t: "Altenew — Bamboo Garden", n: "AT-9921", owned: true,  price: "$22" },
    { t: "Concord & 9th — Turnabout", n: "C9-0455", owned: false, price: "$25" },
    { t: "Hero Arts — Color Layering", n: "HA-3380", owned: false, price: "$19" },
  ];
  return (
    <>
      <h3 style={{ marginBottom: 4 }}>Wishlist</h3>
      <span className="kicker" style={{ display: "block", marginBottom: 18 }}>23 items · we'll warn you before you double up</span>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {items.map((it, i) => (
          <div key={i} style={{
            padding: "12px 14px", border: "1px solid var(--line-soft)", borderRadius: 8,
            background: it.owned ? "var(--accent-soft)" : "var(--paper)",
            display: "grid", gridTemplateColumns: "1fr auto auto", gap: 16, alignItems: "center",
          }}>
            <div>
              <div style={{ fontWeight: 500 }}>{it.t}</div>
              <div className="kicker" style={{ marginTop: 4 }}>{it.n}</div>
            </div>
            {it.owned
              ? <span className="kicker" style={{ color: "var(--accent-deep)" }}>already own this!</span>
              : <span className="kicker">{it.price}</span>}
            <div style={{ width: 18, height: 18, borderRadius: 5, border: "1px solid var(--line)", background: it.owned ? "var(--accent)" : "transparent" }} />
          </div>
        ))}
      </div>
    </>
  );
}

function Features() {
  const items = [
    { num: "01", title: "Home dashboard",     body: "Everything at a glance — recent projects, low stock, and what's next on your calendar." },
    { num: "02", title: "Inventory",          body: "Catalog stamps, dies, ink, and cardstock with photos, item numbers, and locations." },
    { num: "03", title: "Projects",           body: "Save your finished makes with photos, linked to the exact supplies you used." },
    { num: "04", title: "Card Build Wizard",  body: "Plan a card step by step from what you already own, then save it as a project." },
    { num: "05", title: "Color Match",        body: "Pick a color and instantly see every coordinating cardstock and ink in your stash." },
    { num: "06", title: "Wishlist",           body: "Track what you want to buy and get warned before you double up on something you own." },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Features</div>
          <h2>Made for the way you already organize.</h2>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          borderTop: "1px solid var(--line-soft)",
          borderLeft: "1px solid var(--line-soft)",
        }} className="features-grid">
          {items.map((f, i) => (
            <div key={i} style={{
              padding: "32px 28px",
              borderRight: "1px solid var(--line-soft)",
              borderBottom: "1px solid var(--line-soft)",
            }}>
              <div className="kicker" style={{ marginBottom: 14, color: "var(--accent-deep)" }}>{f.num}</div>
              <h3 style={{ marginBottom: 10, fontSize: "1.2rem" }}>{f.title}</h3>
              <p style={{ color: "var(--ink-2)", margin: 0, fontSize: "0.95rem", lineHeight: 1.55 }}>{f.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ColorMatchShowcase() {
  const swatches = [
    { name: "Coral", hex: "#d8543a" },
    { name: "Marigold", hex: "#e0a83a" },
    { name: "Sage", hex: "#7fa07f" },
    { name: "Sky", hex: "#7aa7cc" },
    { name: "Lilac", hex: "#a890c8" },
    { name: "Kraft", hex: "#c0a878" },
  ];
  const [sel, setSel] = React.useState(swatches[0]);
  const library = {
    Coral:    [["Coral cardstock", "NB-CORAL", "cardstock"], ["Poppy ink pad", "RG-INK-31", "ink"], ["Sunset blend", "AT-INK-08", "ink"]],
    Marigold: [["Marigold cardstock", "NB-MGD", "cardstock"], ["Honey ink pad", "RG-INK-12", "ink"], ["Golden glow", "AT-INK-21", "ink"]],
    Sage:     [["Sage cardstock", "NB-SAGE", "cardstock"], ["Olive ink pad", "RG-INK-44", "ink"], ["Fern blend", "AT-INK-15", "ink"]],
    Sky:      [["Sky cardstock", "NB-SKY", "cardstock"], ["Ocean ink pad", "RG-INK-07", "ink"], ["Denim wash", "AT-INK-19", "ink"]],
    Lilac:    [["Lilac cardstock", "NB-LILAC", "cardstock"], ["Wisteria ink pad", "RG-INK-28", "ink"], ["Plum blend", "AT-INK-33", "ink"]],
    Kraft:    [["Kraft 110lb", "NB-110K", "cardstock"], ["Coffee ink pad", "RG-INK-02", "ink"], ["Walnut stain", "AT-INK-40", "ink"]],
  };
  const matches = library[sel.name] || [];
  return (
    <section className="section" style={{ background: "var(--paper-2)", borderTop: "1px solid var(--line-soft)", borderBottom: "1px solid var(--line-soft)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "center" }} className="hero-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Most-loved feature</div>
            <h2 style={{ marginBottom: 22 }}>Color Match.</h2>
            <p className="lead" style={{ marginBottom: 14 }}>
              Pick the color you're building around and Color Match instantly
              shows every coordinating cardstock and ink you already own.
            </p>
            <p className="lead">
              No more holding a ribbon up to the light, second-guessing whether
              that green really goes. Your whole palette, in one glance.
            </p>
          </div>
          <div className="card bordered" style={{ background: "var(--paper)", padding: 24 }}>
            <div className="kicker" style={{ marginBottom: 12 }}>Color Match · pick a color</div>
            <div style={{ display: "flex", gap: 8, marginBottom: 20, flexWrap: "wrap" }}>
              {swatches.map((s) => (
                <button
                  key={s.name}
                  onClick={() => setSel(s)}
                  aria-label={s.name}
                  style={{
                    width: 44, height: 44, borderRadius: 10, cursor: "pointer",
                    background: s.hex,
                    border: "2px solid " + (sel.name === s.name ? "var(--ink)" : "transparent"),
                    boxShadow: sel.name === s.name ? "0 0 0 2px var(--paper), 0 0 0 4px var(--ink)" : "0 1px 2px rgba(0,0,0,.1)",
                  }}
                />
              ))}
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
              <div style={{ width: 20, height: 20, borderRadius: 5, background: sel.hex, border: "1px solid var(--line)" }} />
              <div style={{ fontWeight: 600 }}>{sel.name}</div>
              <span className="kicker">{matches.length} coordinating supplies</span>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {matches.map(([t, n, kind], i) => (
                <div key={i} style={{
                  padding: "12px 14px", border: "1px solid var(--line-soft)",
                  borderRadius: 8, background: "var(--paper)",
                  display: "flex", justifyContent: "space-between", alignItems: "center",
                }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <div style={{ width: 28, height: 28, borderRadius: 6, background: sel.hex, border: "1px solid var(--line-soft)" }} />
                    <div>
                      <div style={{ fontWeight: 500 }}>{t}</div>
                      <div className="kicker" style={{ marginTop: 4 }}>{n}</div>
                    </div>
                  </div>
                  <span className="kicker" style={{ color: "var(--accent-deep)" }}>{kind}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function YourDataYours() {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Your data, yours</div>
          <h2>No accounts. No cloud. No nags.</h2>
        </div>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
        }} className="data-grid">
          {[
            { n: "01", t: "On your computer", b: "Everything saves to a single file on your machine. No cloud, no servers, no internet required." },
            { n: "02", t: "Backups are easy", b: "Copy one file. That's the entire backup. Drop it in Dropbox, OneDrive, or onto a USB stick." },
            { n: "03", t: "No nags",          b: "No subscriptions, no upsells, no email collection. Open the app and use it." },
          ].map((b, i) => (
            <div key={i} style={{
              padding: "0 32px",
              borderLeft: i > 0 ? "1px solid var(--line-soft)" : 0,
            }}>
              <div className="kicker" style={{ marginBottom: 14, color: "var(--accent-deep)" }}>{b.n}</div>
              <h3 style={{ marginBottom: 10 }}>{b.t}</h3>
              <p style={{ color: "var(--ink-2)", margin: 0, fontSize: "0.97rem", lineHeight: 1.6 }}>{b.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClosingCTA({ go }) {
  return (
    <section className="section" style={{ paddingBottom: 0 }}>
      <div className="container">
        <div style={{
          background: "var(--ink)", color: "var(--paper)",
          padding: "72px 56px", borderRadius: 16,
          position: "relative", overflow: "hidden",
        }}>
          <div style={{ position: "relative", maxWidth: 640 }}>
            <div className="kicker" style={{ color: "var(--paper-3)", marginBottom: 14 }}>Get started</div>
            <h2 style={{ marginBottom: 18 }}>Ready to find what you own?</h2>
            <p style={{ fontSize: "1.08rem", color: "rgba(250,247,241,.72)", marginBottom: 32, lineHeight: 1.6 }}>
              Free download. Free forever. Made by a crafter who just wanted
              to stop buying duplicate sentiment stamps.
            </p>
            <div className="row" style={{ gap: 12 }}>
              <button className="btn btn-lg" onClick={() => go("download")} style={{ background: "var(--accent)", borderColor: "var(--accent)" }}>
                <DownloadIcon /> Get My Crafty Stash
              </button>
              <button className="btn ghost btn-lg" style={{ color: "var(--paper)" }} onClick={() => go("howto")}>
                See it in action →
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomePage });