// Pre-listing Presentations page — 9-page deck preview

const PRELISTING_PAGES = [
  {
    n: "01",
    title: "Cover",
    sub: "What sellers see when you walk in.",
    kind: "cover",
  },
  {
    n: "02",
    title: "CMA",
    sub: "Comparable sales, refined to your block.",
    kind: "cma",
  },
  {
    n: "03",
    title: "Market position",
    sub: "Where this home sits, today.",
    kind: "market",
  },
  {
    n: "04",
    title: "Marketing plan",
    sub: "Channels, cadence, content. The full plan.",
    kind: "plan",
  },
  {
    n: "05",
    title: "The team",
    sub: "Who works on this listing — and why.",
    kind: "team",
  },
  {
    n: "06",
    title: "Timeline",
    sub: "From signature to sold, week by week.",
    kind: "timeline",
  },
  {
    n: "07",
    title: "Pricing strategy",
    sub: "The number, and the math behind it.",
    kind: "pricing",
  },
  {
    n: "08",
    title: "Seller net sheet",
    sub: "What you actually walk away with.",
    kind: "netsheet",
  },
  {
    n: "09",
    title: "Signature",
    sub: "The agreement, ready to sign.",
    kind: "sign",
  },
];

function DeckPagePreview({ page, accent, wordmark, idx }) {
  const accentColor = accent === "teal" ? "#2EBDBD" : "#E8573A";

  const inner = (() => {
    switch (page.kind) {
      case "cover":
        return (
          <div className="dp-cover">
            <div className="dp-photo">
              <svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
                <defs>
                  <linearGradient id={`sky-${idx}`} x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#FFD9C7" />
                    <stop offset="100%" stopColor="#FFEFE4" />
                  </linearGradient>
                </defs>
                <rect width="320" height="200" fill={`url(#sky-${idx})`} />
                <rect x="0" y="140" width="320" height="60" fill="#D7CFC7" />
                <polygon points="60,140 160,70 260,140" fill="#0A0A0A" />
                <rect x="80" y="135" width="160" height="60" fill="#FAFAFA" />
                <rect x="100" y="150" width="32" height="32" fill="#2EBDBD" opacity="0.85" />
                <rect x="180" y="150" width="32" height="32" fill="#2EBDBD" opacity="0.85" />
                <rect x="148" y="160" width="24" height="35" fill="#0A0A0A" />
              </svg>
            </div>
            <div className="dp-cover-meta">
              <div className="mono dp-eyebrow" style={{ color: accentColor }}>PROPOSED MARKETING PLAN</div>
              <div className="dp-cover-h">412 Henderson Ave</div>
              <div className="dp-cover-sub mono">PREPARED FOR · THE HENDERSON FAMILY</div>
            </div>
          </div>
        );

      case "cma":
        return (
          <div className="dp-cma">
            <div className="dp-eyebrow mono">COMPARATIVE MARKET ANALYSIS</div>
            <div className="dp-h">Five sales. Three months. Same block.</div>
            <div className="cma-table mono">
              <div className="cma-row head">
                <span>ADDRESS</span><span>BEDS</span><span>SQFT</span><span>$/SQFT</span><span>SOLD</span>
              </div>
              {[
                ["408 Henderson", "3", "1,860", "$441", "$820K"],
                ["417 Cedar", "3", "1,920", "$432", "$830K"],
                ["422 Henderson", "4", "2,140", "$425", "$910K"],
                ["404 Cedar", "3", "1,780", "$449", "$799K"],
                ["411 Henderson", "3", "1,950", "$436", "$850K"],
              ].map((r, i) => (
                <div key={i} className="cma-row">
                  {r.map((c, j) => <span key={j}>{c}</span>)}
                </div>
              ))}
              <div className="cma-row total">
                <span>YOUR HOME</span><span>3</span><span>1,940</span>
                <span style={{ color: accentColor }}>$436</span>
                <span style={{ color: accentColor }}>$847K</span>
              </div>
            </div>
          </div>
        );

      case "market":
        return (
          <div className="dp-market">
            <div className="dp-eyebrow mono">MARKET POSITION</div>
            <div className="dp-h">You're in the strongest band.</div>
            <div className="market-chart">
              <svg viewBox="0 0 360 160" width="100%" height="160">
                <line x1="0" y1="140" x2="360" y2="140" stroke="#E0D8D0" />
                {[20,40,60,80,100,120].map(y =>
                  <line key={y} x1="0" y1={y} x2="360" y2={y} stroke="#F0EBE5" strokeDasharray="2 2"/>
                )}
                <path d="M 10,130 Q 60,110 120,80 T 240,40 T 350,20"
                      fill="none" stroke={accentColor} strokeWidth="2"/>
                <circle cx="240" cy="40" r="5" fill={accentColor} />
                <text x="248" y="36" fontSize="9" fill="#1A1A1A" fontFamily="Space Grotesk" fontWeight="600">$847K</text>
              </svg>
              <div className="market-legend mono">
                <div><strong>+8.2%</strong> 90-DAY APPRECIATION</div>
                <div><strong>21 DAYS</strong> AVG TIME ON MARKET</div>
                <div><strong>97%</strong> LIST-TO-SALE RATIO</div>
              </div>
            </div>
          </div>
        );

      case "plan":
        return (
          <div className="dp-plan">
            <div className="dp-eyebrow mono">MARKETING PLAN</div>
            <div className="dp-h">5 channels. 12 touchpoints. 30 days.</div>
            <div className="plan-grid">
              {[
                { ch: "MLS + IDX", touches: 6, kind: "always" },
                { ch: "Open houses", touches: 3, kind: "burst" },
                { ch: "Social (IG / FB)", touches: 18, kind: "drip" },
                { ch: "Email + SMS", touches: 8, kind: "drip" },
                { ch: "Print mailers", touches: 2, kind: "burst" },
              ].map((p) => (
                <div key={p.ch} className="plan-row">
                  <div className="plan-ch">{p.ch}</div>
                  <div className="plan-bars">
                    {Array.from({length: 30}).map((_,i) => {
                      const active =
                        p.kind === "always" ? i % 5 < 2 :
                        p.kind === "burst" ? [3,4,15,16].includes(i) :
                        [1,4,7,10,13,16,19,22,25,28].includes(i);
                      return <span key={i} className={`pb ${active ? "on" : ""}`} style={active ? { background: accentColor } : {}} />;
                    })}
                  </div>
                  <div className="plan-count mono">{p.touches}×</div>
                </div>
              ))}
            </div>
          </div>
        );

      case "team":
        return (
          <div className="dp-team">
            <div className="dp-eyebrow mono">YOUR TEAM</div>
            <div className="dp-h">Five people. One listing.</div>
            <div className="team-grid">
              {[
                { i: "MC", n: "Maria Chen", r: "Listing Agent" },
                { i: "DR", n: "David Reyes", r: "Loan Officer" },
                { i: "SK", n: "Sarah Kim", r: "Stager" },
                { i: "TH", n: "Tom Hayes", r: "Photographer" },
                { i: "LO", n: "Lola", r: "AI Strategist", lola: true },
              ].map((m) => (
                <div key={m.i} className="team-card">
                  <div className="team-av" style={{ background: m.lola ? `linear-gradient(135deg, ${accentColor}, #2EBDBD)` : "#0A0A0A" }}>
                    {m.lola ? <LolaOrb size={20} /> : <span>{m.i}</span>}
                  </div>
                  <div className="team-n">{m.n}</div>
                  <div className="team-r mono">{m.r.toUpperCase()}</div>
                </div>
              ))}
            </div>
          </div>
        );

      case "timeline":
        return (
          <div className="dp-timeline">
            <div className="dp-eyebrow mono">TIMELINE</div>
            <div className="dp-h">Signature to sold, in 6 weeks.</div>
            <div className="tl-track">
              {[
                { w: "W1", t: "Photos + staging" },
                { w: "W2", t: "MLS + open house" },
                { w: "W3", t: "First offer window" },
                { w: "W4", t: "Negotiation" },
                { w: "W5", t: "Inspection + appraisal" },
                { w: "W6", t: "Close + key handoff" },
              ].map((s, i) => (
                <div key={s.w} className="tl-step">
                  <div className="tl-dot" style={{ background: i === 0 ? accentColor : "#0A0A0A" }} />
                  <div className="tl-label">
                    <div className="mono">{s.w}</div>
                    <div className="tl-t">{s.t}</div>
                  </div>
                </div>
              ))}
              <div className="tl-line" />
            </div>
          </div>
        );

      case "pricing":
        return (
          <div className="dp-pricing">
            <div className="dp-eyebrow mono">PRICING STRATEGY</div>
            <div className="dp-h">$847,000.</div>
            <div className="dp-sub">Priced to attract 3+ offers in the first 14 days.</div>
            <div className="pricing-math">
              <div className="pm-row">
                <span>NEIGHBORHOOD $/SQFT</span>
                <span className="mono">$436</span>
              </div>
              <div className="pm-row">
                <span>YOUR SQFT</span>
                <span className="mono">× 1,940</span>
              </div>
              <div className="pm-row total">
                <span>BASELINE</span>
                <span className="mono">$845,840</span>
              </div>
              <div className="pm-row">
                <span>LIGHT + LOT PREMIUM</span>
                <span className="mono">+ $12,000</span>
              </div>
              <div className="pm-row">
                <span>DEFERRED MAINT.</span>
                <span className="mono">− $11,000</span>
              </div>
              <div className="pm-row final" style={{ color: accentColor }}>
                <span>RECOMMENDED LIST</span>
                <span className="mono">$847,000</span>
              </div>
            </div>
          </div>
        );

      case "netsheet":
        return (
          <div className="dp-netsheet">
            <div className="dp-eyebrow mono">SELLER NET SHEET</div>
            <div className="dp-h">You'll walk away with $478,840.</div>
            <div className="ns-table mono">
              <div className="ns-row head">
                <span>LINE ITEM</span><span>AMOUNT</span>
              </div>
              <div className="ns-row pos">
                <span>Sale price</span>
                <span>$847,000</span>
              </div>
              <div className="ns-row sub">
                <span>Existing mortgage payoff</span>
                <span>− $312,400</span>
              </div>
              <div className="ns-row sub">
                <span>Listing commission (2.5%)</span>
                <span>− $21,175</span>
              </div>
              <div className="ns-row sub">
                <span>Buyer agent commission (2.5%)</span>
                <span>− $21,175</span>
              </div>
              <div className="ns-row sub">
                <span>Title + escrow</span>
                <span>− $4,235</span>
              </div>
              <div className="ns-row sub">
                <span>Transfer tax</span>
                <span>− $1,058</span>
              </div>
              <div className="ns-row sub">
                <span>Pre-sale prep + staging</span>
                <span>− $4,200</span>
              </div>
              <div className="ns-row sub">
                <span>Property tax proration</span>
                <span>− $2,917</span>
              </div>
              <div className="ns-row sub">
                <span>HOA + misc</span>
                <span>− $1,000</span>
              </div>
              <div className="ns-row final">
                <span>NET TO SELLER</span>
                <span style={{ color: accentColor }}>$478,840</span>
              </div>
            </div>
            <div className="ns-foot mono">EST · ASSUMES OCT 14 CLOSE · ADJUSTS WITH OFFER</div>
          </div>
        );

      case "sign":
        return (
          <div className="dp-sign">
            <div className="dp-eyebrow mono">LISTING AGREEMENT</div>
            <div className="dp-h">Ready when you are.</div>
            <div className="sign-doc">
              <div className="sign-row"><span>SELLER</span><span className="mono">THE HENDERSON FAMILY</span></div>
              <div className="sign-row"><span>PROPERTY</span><span className="mono">412 HENDERSON AVE</span></div>
              <div className="sign-row"><span>LIST PRICE</span><span className="mono" style={{ color: accentColor }}>$847,000</span></div>
              <div className="sign-row"><span>TERM</span><span className="mono">90 DAYS</span></div>
              <div className="sign-row"><span>COMMISSION</span><span className="mono">2.5% + 2.5%</span></div>
              <div className="sign-line">
                <div className="mono">SELLER</div>
                <div className="sig-blank">________________________</div>
                <div className="mono">DATE</div>
              </div>
              <div className="sign-line">
                <div className="mono">AGENT</div>
                <div className="sig-blank">Maria Chen</div>
                <div className="mono">10/14/26</div>
              </div>
            </div>
          </div>
        );
      default:
        return null;
    }
  })();

  return (
    <div className="dp-page">
      <div className="dp-page-chrome">
        <span className="mono dp-page-num">{page.n}</span>
        <span className="mono dp-page-of">/ 09</span>
      </div>
      <div className="dp-page-content">{inner}</div>
      <div className="dp-page-foot">
        <Wordmark variant={wordmark} size={11} />
        <span className="mono">412 HENDERSON · MARIA CHEN · COMPASS</span>
      </div>
    </div>
  );
}

function PreListingPage({ accent, wordmark }) {
  const [active, setActive] = React.useState(0);
  const accentColor = accent === "teal" ? "#2EBDBD" : "#E8573A";

  return (
    <React.Fragment>
      <PageHero
        eyebrow="PRE-LISTING PRESENTATIONS"
        subtitle="Walk into the seller meeting with a 9-page deck — generated for this exact home, this exact block, this exact family. Print it, present it, or send the live link."
        kicker={
          <div className="prelisting-kicker mono">
            <span>9 PAGES</span><span>·</span>
            <span>BUILT FROM YOUR LISTING</span><span>·</span>
            <span>PRINT OR WEB</span>
          </div>
        }
      >
        Walk in with the<br />
        <span className="hero-em">whole strategy.</span>
      </PageHero>

      {/* Page selector strip */}
      <section className="deck-strip">
        <div className="deck-strip-rail">
          {PRELISTING_PAGES.map((p, i) => (
            <button
              key={p.n}
              className={`deck-thumb ${active === i ? "active" : ""}`}
              onClick={() => setActive(i)}
              style={active === i ? { borderColor: accentColor } : {}}
            >
              <span className="mono deck-thumb-n">{p.n}</span>
              <span className="deck-thumb-t">{p.title}</span>
            </button>
          ))}
        </div>
      </section>

      {/* Active page */}
      <section className="deck-stage-section">
        <div className="deck-stage-meta">
          <div className="ds-eyebrow mono">PAGE {PRELISTING_PAGES[active].n}</div>
          <div className="ds-title">{PRELISTING_PAGES[active].title}</div>
          <div className="ds-sub">{PRELISTING_PAGES[active].sub}</div>
          <div className="ds-controls">
            <button
              className="ds-btn"
              onClick={() => setActive((a) => (a - 1 + PRELISTING_PAGES.length) % PRELISTING_PAGES.length)}
              aria-label="Previous"
            >←</button>
            <span className="mono ds-counter">{active + 1} / {PRELISTING_PAGES.length}</span>
            <button
              className="ds-btn"
              onClick={() => setActive((a) => (a + 1) % PRELISTING_PAGES.length)}
              aria-label="Next"
            >→</button>
          </div>
        </div>
        <div className="deck-stage-paper" style={{ "--accent": accentColor }}>
          <DeckPagePreview page={PRELISTING_PAGES[active]} accent={accent} wordmark={wordmark} idx={active} />
        </div>
      </section>

      {/* All pages grid */}
      <section className="deck-all">
        <div className="strip-head">
          <div className="strip-eyebrow mono">EVERY PAGE</div>
          <h2 className="strip-h2">All nine, side by side.</h2>
        </div>
        <div className="deck-all-grid">
          {PRELISTING_PAGES.map((p, i) => (
            <button key={p.n} className="deck-all-card" onClick={() => { setActive(i); window.scrollTo({ top: 400, behavior: "smooth" }); }}>
              <div className="deck-all-thumb" style={{ "--accent": accentColor }}>
                <DeckPagePreview page={p} accent={accent} wordmark={wordmark} idx={`m${i}`} />
              </div>
              <div className="deck-all-meta">
                <span className="mono">{p.n}</span>
                <span>{p.title}</span>
              </div>
            </button>
          ))}
        </div>
      </section>

      <section className="page-cta">
        <div className="page-cta-inner">
          <h2>Walk in with the strategy. Walk out with the listing.</h2>
          <p>Be the realtor who shows up over-prepared.</p>
          <Waitlist accent={accent} />
        </div>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { PreListingPage, PRELISTING_PAGES });