/* Pitch landing page for Delaney. Reached via magic link her dad texts her.
   URL: bydelaney.com/#/start?key=delaneymae2026
   First impression — sales pitch, then click → magic login → dashboard. */

const DELANEY_MAGIC_KEY = "delaneymae2026"; // shared secret in URL — set localStorage on first visit

function PitchPage({ setRoute }) {
  // Check key on mount, set localStorage so she stays logged in
  React.useEffect(() => {
    try {
      const url = new URL(window.location.href);
      const key = url.searchParams.get("key") || (window.location.hash.match(/key=([^&]+)/) || [])[1];
      if (key === DELANEY_MAGIC_KEY) {
        localStorage.setItem("delaney.session", "active");
        localStorage.setItem("delaney.session.at", new Date().toISOString());
      }
    } catch {}
  }, []);

  const sites = [
    { name: "laneymae.com", role: "your domain, your store", img: "https://images.unsplash.com/photo-1597848212624-a19eb35e2651?w=600&q=80&auto=format&fit=crop" },
    { name: "schedulemyhaircut.com", role: "AI front desk for solo barbers", img: "https://images.unsplash.com/photo-1585747860715-2ba37e788b70?w=600&q=80&auto=format&fit=crop" },
    { name: "speakyouridea.com", role: "vibe an idea into existence", img: "https://images.unsplash.com/photo-1589903308904-1010c2294adc?w=600&q=80&auto=format&fit=crop" },
    { name: "mydragondrop.com", role: "drop a doc, understand it", img: "https://images.unsplash.com/photo-1568667256549-094345857637?w=600&q=80&auto=format&fit=crop" },
    { name: "managemydoors.com", role: "AI property manager", img: "https://images.unsplash.com/photo-1568605114967-8130f3a36994?w=600&q=80&auto=format&fit=crop" },
    { name: "snaproast.com", role: "the night-out photo aggregator", img: "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=600&q=80&auto=format&fit=crop" },
    { name: "fabbgolf.com", role: "AI golf coach", img: "https://images.unsplash.com/photo-1535131749006-b7f58c99034b?w=600&q=80&auto=format&fit=crop" },
    { name: "aidentalrecruiter.com", role: "AI for dental practice hiring", img: "https://images.unsplash.com/photo-1606811971618-4486d14f3f99?w=600&q=80&auto=format&fit=crop" },
  ];

  return (
    <main className="page-enter" data-screen-label="Pitch">
      <section className="pitch-hero">
        {/* dynamic accent shapes */}
        <div className="accent-blob accent-blob--1" aria-hidden="true"></div>
        <div className="accent-blob accent-blob--2" aria-hidden="true"></div>

        <div className="shell pitch-hero-grid">
          <div className="pitch-hero-text">
            <div className="eyebrow">For Delaney — summer 2026</div>
            <h1 className="pitch-h1 serif">
              Hey Laney.<br />
              Here's the deal.
            </h1>
            <p className="pitch-lead">
              Dad's got <strong>450+ websites</strong> in his head and a handful
              already on the internet. He needs someone he trusts to help him
              push these forward — kill the bad ideas, sharpen the good ones,
              vibe up the half-built stuff, and just&nbsp;tell&nbsp;him&nbsp;what's&nbsp;real.
              That's the job.
            </p>
            <p className="pitch-lead pitch-lead--muted">
              You're not employee. You're not interning. You're a daughter who
              happens to be good at the thing he needs help with right now.
            </p>
          </div>

          {/* OFFSET PHOTO COLLAGE — gives the page energy */}
          <div className="pitch-collage" aria-hidden="true">
            <div className="collage-card collage-card--1">
              <img src="https://images.unsplash.com/photo-1597848212624-a19eb35e2651?w=500&q=80&auto=format&fit=crop" alt="" />
              <span className="collage-tag">laneymae.com</span>
            </div>
            <div className="collage-card collage-card--2">
              <img src="https://images.unsplash.com/photo-1568667256549-094345857637?w=500&q=80&auto=format&fit=crop" alt="" />
              <span className="collage-tag">dragondrop</span>
            </div>
            <div className="collage-card collage-card--3">
              <img src="https://images.unsplash.com/photo-1585747860715-2ba37e788b70?w=500&q=80&auto=format&fit=crop" alt="" />
              <span className="collage-tag">+450 more</span>
            </div>
            <div className="collage-sticker">$15<br /><small>per lesson</small></div>
          </div>
        </div>
      </section>

      <hr className="divider" />

      <section className="pitch-money">
        <div className="shell">
          <div className="eyebrow">Money</div>
          <div className="pitch-money-grid">
            <div className="pitch-money-stat">
              <div className="pitch-money-num">$15</div>
              <div className="pitch-money-label">per lesson · ~1 hour each</div>
            </div>
            <div className="pitch-money-stat">
              <div className="pitch-money-num">$150</div>
              <div className="pitch-money-label">a day if you do 10</div>
            </div>
            <div className="pitch-money-stat">
              <div className="pitch-money-num">$500+</div>
              <div className="pitch-money-label">a week if you go hard</div>
            </div>
          </div>
          <p className="pitch-lead" style={{ marginTop: 32, maxWidth: 700 }}>
            Might not sound like a lot. But your rent and food are already
            covered, this is fun money on top — and you can do it whenever.
            Late at night. Saturday morning. Coffee shop. Skip three days
            because you're at the lake. Do eight in one Sunday because
            you've got an event next weekend and want $120 for the outfit.
          </p>
          <p className="pitch-lead pitch-lead--muted" style={{ marginTop: 18, maxWidth: 700 }}>
            <strong>Flexible</strong> is the whole point. No hours.
            No clocking in. You finish a lesson, you hit "Cash out,"
            Venmo lands within a day.
          </p>
        </div>
      </section>

      <hr className="divider" />

      <section className="pitch-work">
        <div className="shell">
          <div className="eyebrow">What you'd actually work on</div>
          <h2 className="home-h2" style={{ marginTop: 14, marginBottom: 24 }}>
            Some of his sites.<br />A few of them you'll vibe up yourself.
          </h2>
          <p className="pitch-lead" style={{ maxWidth: 680, marginBottom: 40 }}>
            Most are placeholders waiting for someone with taste.
            You'd open one, the AI walks you through what it does,
            you make it not look like crap, you ship the new version.
            Each one of those = a lesson.
          </p>
          <div className="pitch-site-grid">
            {sites.map((s) => (
              <a key={s.name} className="pitch-site-tile" href={"https://" + s.name} target="_blank" rel="noopener">
                <div className="pitch-site-img">
                  <img src={s.img} alt={s.name} loading="lazy" />
                </div>
                <div className="pitch-site-meta">
                  <div className="pitch-site-name serif">{s.name}</div>
                  <div className="pitch-site-role">{s.role}</div>
                </div>
              </a>
            ))}
          </div>
          <p className="pitch-lead pitch-lead--muted" style={{ marginTop: 32, maxWidth: 680 }}>
            And the rest of the 450? You'll see them as they come up.
            Some are dumb. Some are real businesses. Part of your job
            is telling him which is which.
          </p>
        </div>
      </section>

      <hr className="divider" />

      <section className="pitch-rules">
        <div className="shell">
          <div className="eyebrow">The rules</div>
          <h2 className="home-h2" style={{ marginTop: 14, marginBottom: 28 }}>
            Quick.
          </h2>
          <ul className="pitch-rules-list">
            <li>
              <strong>One lesson at a time.</strong> You only see what's next.
              Sequential — you can skip one, but you have to come back to it
              before you push past two ahead.
            </li>
            <li>
              <strong>Done is better than perfect.</strong> Ship ugly, fix later.
              First versions are supposed to look like first versions.
            </li>
            <li>
              <strong>Talk, don't type.</strong> Plug in AirPods, use voice mode
              on ChatGPT or Claude. Way faster. You'll like it.
            </li>
            <li>
              <strong>Push back on the AI.</strong> If it suggests something
              dumb, say so. It's not your boss.
            </li>
            <li>
              <strong>Tell dad if something's broken</strong> or boring or
              you think his idea is bad. The job is honest opinion, not
              just clicking through.
            </li>
          </ul>
        </div>
      </section>

      <section className="pitch-cta">
        <div className="shell pitch-cta-inner">
          <h2 className="pitch-cta-h serif">
            In or out?
          </h2>
          <p className="pitch-lead" style={{ maxWidth: 560 }}>
            Click in. You'll land on your dashboard. First lesson is fun —
            you change <strong>laneymae.com</strong> into whatever you want
            and watch the internet update in front of you. $15 for an hour
            of doing that.
          </p>
          <button className="btn btn--terracotta pitch-cta-btn" onClick={() => {
            localStorage.setItem("delaney.session", "active");
            localStorage.setItem("delaney.session.at", new Date().toISOString());
            window.location.hash = "#/dashboard";
          }}>
            Open my dashboard →
          </button>
        </div>
      </section>

      <style>{`
        .pitch-hero {
          padding: clamp(56px, 9vw, 120px) 0 clamp(48px, 7vw, 96px);
          position: relative;
          overflow: hidden;
        }
        .pitch-hero-grid {
          display: grid;
          grid-template-columns: 1.1fr 0.9fr;
          gap: 64px;
          align-items: center;
          position: relative;
          z-index: 2;
        }
        @media (max-width: 900px) {
          .pitch-hero-grid { grid-template-columns: 1fr; gap: 40px; }
        }
        .pitch-hero-inner { max-width: 760px; }

        /* accent blobs in the background — soft, off-page */
        .accent-blob {
          position: absolute;
          border-radius: 50%;
          filter: blur(60px);
          opacity: 0.35;
          z-index: 1;
        }
        .accent-blob--1 {
          width: 380px; height: 380px;
          background: radial-gradient(circle, var(--terracotta) 0%, transparent 70%);
          top: -120px; right: -80px;
        }
        .accent-blob--2 {
          width: 320px; height: 320px;
          background: radial-gradient(circle, var(--sage-deep, #7E8E76) 0%, transparent 70%);
          bottom: -100px; left: -60px;
          opacity: 0.25;
        }

        /* OFFSET COLLAGE */
        .pitch-collage {
          position: relative;
          height: 460px;
          min-height: 380px;
        }
        .collage-card {
          position: absolute;
          background: var(--paper, #fff);
          border-radius: 10px;
          overflow: hidden;
          box-shadow: 0 24px 60px rgba(31,26,15,0.18);
          transition: transform .4s cubic-bezier(.2,.8,.2,1);
        }
        .collage-card img {
          width: 100%; height: 100%; object-fit: cover; display: block;
        }
        .collage-card .collage-tag {
          position: absolute;
          bottom: 10px; left: 10px;
          background: rgba(255,255,255,0.95);
          padding: 4px 10px;
          border-radius: 999px;
          font-family: var(--mono, monospace);
          font-size: 11px;
          font-weight: 600;
          color: var(--ink-1);
          letter-spacing: 0.04em;
        }
        .collage-card--1 {
          width: 58%; height: 70%;
          top: 0; left: 0;
          transform: rotate(-3deg);
          z-index: 3;
        }
        .collage-card--2 {
          width: 54%; height: 60%;
          top: 24%; right: 0;
          transform: rotate(4deg);
          z-index: 2;
        }
        .collage-card--3 {
          width: 50%; height: 50%;
          bottom: 0; left: 14%;
          transform: rotate(-2deg);
          z-index: 1;
        }
        .collage-card:hover { transform: rotate(0deg) scale(1.02); z-index: 10; }

        /* "$15 per lesson" sticker overlay */
        .collage-sticker {
          position: absolute;
          top: -8px; right: 12%;
          background: var(--terracotta);
          color: var(--cream);
          width: 100px; height: 100px;
          border-radius: 50%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-family: var(--display);
          font-size: 28px;
          font-weight: 700;
          text-align: center;
          transform: rotate(-12deg);
          z-index: 5;
          box-shadow: 0 12px 24px rgba(169, 87, 115, 0.4);
          line-height: 1;
        }
        .collage-sticker small {
          font-family: var(--sans);
          font-size: 9px;
          font-weight: 500;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          margin-top: 4px;
          opacity: 0.85;
        }
        .pitch-h1 {
          font-family: var(--display);
          font-size: clamp(56px, 9vw, 104px);
          line-height: 1;
          letter-spacing: -0.03em;
          margin: 16px 0 36px;
          font-weight: 500;
        }
        .pitch-lead {
          font-family: var(--serif);
          font-size: clamp(19px, 1.7vw, 23px);
          line-height: 1.55;
          color: var(--ink-1);
          margin: 0 0 22px;
          max-width: 680px;
        }
        .pitch-lead--muted { color: var(--ink-2); }

        .pitch-money { padding: clamp(56px, 8vw, 96px) 0; position: relative; }
        .pitch-money::before {
          content: "";
          position: absolute;
          width: 280px; height: 280px;
          background: radial-gradient(circle, rgba(126, 142, 118, 0.3) 0%, transparent 70%);
          filter: blur(50px);
          top: 50%; right: -100px;
          transform: translateY(-50%);
          z-index: 0;
        }
        .pitch-money > .shell { position: relative; z-index: 2; }
        .pitch-money-stat {
          position: relative;
          padding: 20px 0;
        }
        .pitch-money-stat::after {
          content: "";
          position: absolute;
          width: 60px; height: 60px;
          border-radius: 50%;
          background: var(--terracotta-soft, #EBCAD6);
          opacity: 0.6;
          top: 0; left: -16px;
          z-index: -1;
        }
        .pitch-money-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 36px;
          margin: 32px 0 0;
        }
        @media (max-width: 720px) { .pitch-money-grid { grid-template-columns: 1fr; gap: 20px; } }
        .pitch-money-num {
          font-family: var(--display);
          font-size: clamp(56px, 8vw, 96px);
          line-height: 1;
          color: var(--terracotta);
          font-weight: 500;
          letter-spacing: -0.03em;
        }
        .pitch-money-label {
          font-family: var(--serif);
          font-size: 17px;
          color: var(--ink-2);
          margin-top: 8px;
        }

        .pitch-work { padding: clamp(56px, 8vw, 96px) 0; }
        .pitch-site-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 18px;
        }
        @media (max-width: 1000px) { .pitch-site-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 540px) { .pitch-site-grid { grid-template-columns: 1fr; } }
        .pitch-site-tile {
          background: var(--paper, #fff);
          border: 1px solid var(--line);
          border-radius: 12px;
          overflow: hidden;
          text-decoration: none;
          color: inherit;
          transition: transform .15s, box-shadow .15s;
          display: block;
        }
        .pitch-site-tile:hover {
          transform: translateY(-3px);
          box-shadow: 0 16px 36px rgba(0,0,0,0.08);
        }
        .pitch-site-img {
          aspect-ratio: 16 / 10;
          overflow: hidden;
          background: var(--cream-deep, #f3ece2);
        }
        .pitch-site-img img {
          width: 100%; height: 100%; object-fit: cover; display: block;
        }
        .pitch-site-meta { padding: 14px 16px 18px; }
        .pitch-site-name { font-size: 16px; font-weight: 500; }
        .pitch-site-role {
          font-family: var(--mono, monospace);
          font-size: 11px;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          color: var(--ink-3);
          margin-top: 4px;
        }

        .pitch-rules { padding: clamp(56px, 8vw, 96px) 0; background: var(--cream-deep, #f3ece2); }
        .pitch-rules-list {
          list-style: none;
          padding: 0;
          margin: 24px 0 0;
          max-width: 760px;
          display: grid;
          gap: 18px;
        }
        .pitch-rules-list li {
          font-family: var(--serif);
          font-size: 18px;
          line-height: 1.55;
          color: var(--ink-1);
          padding-left: 28px;
          position: relative;
        }
        .pitch-rules-list li::before {
          content: "—";
          position: absolute;
          left: 0;
          color: var(--terracotta);
          font-weight: 600;
        }

        .pitch-cta { padding: clamp(80px, 12vw, 160px) 0; text-align: left; }
        .pitch-cta-inner { max-width: 680px; }
        .pitch-cta-h {
          font-family: var(--display);
          font-size: clamp(48px, 7vw, 80px);
          line-height: 1;
          margin: 0 0 24px;
          font-weight: 500;
          letter-spacing: -0.02em;
        }
        .pitch-cta-btn {
          margin-top: 28px;
          font-size: 18px;
          padding: 20px 36px;
        }
      `}</style>
    </main>
  );
}

window.PitchPage = PitchPage;
window.DELANEY_MAGIC_KEY = DELANEY_MAGIC_KEY;