// Home page — coming-soon hero, simplified.
// Headline plays on the new positioning: "Every listing comes with a strategy"

function HomePage({ accent, wordmark, lockup }) {
  return (
    <React.Fragment>
      {/* Hero */}
      <section className="hero stacked-md">
        <div className="hero-text">
          <div className="hero-eyebrow mono">
            <LolaOrb size={14} />
            <span>POWERED BY LOLA · A SIBLING OF MYLOANIQ</span>
          </div>
          <h1 className="hero-h1">
            Every listing<br />
            comes with a <span className="hero-em">strategy.</span>
          </h1>
          <p className="hero-sub">
            myflyers.ai turns any listing into a complete go-to-market plan —
            buyer-matched flyers, social campaigns, market intel, pre-listing
            decks, and the script you'll read on camera. In seconds.
          </p>
          <div className="hero-cta-row" id="waitlist">
            <Waitlist accent={accent} />
          </div>
          <LiveCounter />
        </div>
        <div className="hero-demo">
          <FlyerMagicDemo accent={accent} />
        </div>
      </section>

      {/* What's in a strategy — five cards */}
      <section className="strip strategy-grid-section">
        <div className="strip-head">
          <div className="strip-eyebrow mono">WHAT'S IN A STRATEGY</div>
          <h2 className="strip-h2">More than a flyer. The full marketing pack.</h2>
        </div>
        <div className="strategy-five">
          <a href="#/realtors" className="strat-card">
            <div className="strat-num mono">01</div>
            <div className="strat-icon">
              <svg viewBox="0 0 32 40" width="32" height="40">
                <rect x="2" y="2" width="28" height="36" rx="2" fill="none" stroke="currentColor" strokeWidth="1.5" />
                <rect x="6" y="6" width="20" height="14" fill="currentColor" opacity="0.18" />
                <rect x="6" y="22" width="20" height="2" fill="currentColor" opacity="0.5" />
                <rect x="6" y="26" width="14" height="2" fill="currentColor" opacity="0.3" />
                <rect x="6" y="30" width="16" height="2" fill="currentColor" opacity="0.3" />
              </svg>
            </div>
            <h3>Buyer-matched flyers</h3>
            <p>Personalized to a real buyer's budget, rate, and what they actually care about.</p>
            <div className="strat-foot mono">8 FORMATS →</div>
          </a>

          <a href="#/prelisting" className="strat-card">
            <div className="strat-num mono">02</div>
            <div className="strat-icon">
              <svg viewBox="0 0 40 32" width="40" height="32">
                <rect x="0" y="2" width="20" height="26" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.5" />
                <rect x="6" y="0" width="20" height="26" rx="1.5" fill="currentColor" opacity="0.12" stroke="currentColor" strokeWidth="1.5" />
                <rect x="12" y="-2" width="20" height="26" rx="1.5" fill="currentColor" opacity="0.06" stroke="currentColor" strokeWidth="1.5" transform="translate(8 6)" />
              </svg>
            </div>
            <h3>Pre-listing presentations</h3>
            <p>An 8-page deck for the seller meeting — CMA, marketing plan, timeline, signature.</p>
            <div className="strat-foot mono">8 PAGES →</div>
          </a>

          <a href="#/strategy" className="strat-card">
            <div className="strat-num mono">03</div>
            <div className="strat-icon">
              <svg viewBox="0 0 36 36" width="36" height="36">
                <rect x="2" y="2" width="14" height="14" rx="2" fill="currentColor" opacity="0.18" />
                <rect x="20" y="2" width="14" height="14" rx="2" fill="currentColor" opacity="0.32" />
                <rect x="2" y="20" width="14" height="14" rx="2" fill="currentColor" opacity="0.45" />
                <rect x="20" y="20" width="14" height="14" rx="2" fill="currentColor" />
              </svg>
            </div>
            <h3>Social media plan</h3>
            <p>A 30-day post calendar tuned to the home — reels, carousels, story sequences.</p>
            <div className="strat-foot mono">30 POSTS →</div>
          </a>

          <a href="#/strategy" className="strat-card">
            <div className="strat-num mono">04</div>
            <div className="strat-icon">
              <svg viewBox="0 0 36 32" width="36" height="32">
                <polyline points="2,28 10,22 16,24 22,14 28,18 34,8" fill="none" stroke="currentColor" strokeWidth="1.5" />
                <circle cx="34" cy="8" r="2.5" fill="currentColor" />
                <line x1="2" y1="32" x2="34" y2="32" stroke="currentColor" strokeWidth="1" opacity="0.4" />
              </svg>
            </div>
            <h3>Market intel</h3>
            <p>What's selling, where, at what price. Comparison graphics, days-on-market, scores.</p>
            <div className="strat-foot mono">LIVE DATA →</div>
          </a>

          <a href="#/strategy" className="strat-card">
            <div className="strat-num mono">05</div>
            <div className="strat-icon">
              <svg viewBox="0 0 36 36" width="36" height="36">
                <rect x="6" y="4" width="24" height="22" rx="2" fill="none" stroke="currentColor" strokeWidth="1.5" />
                <line x1="10" y1="10" x2="26" y2="10" stroke="currentColor" strokeWidth="1.5" />
                <line x1="10" y1="14" x2="22" y2="14" stroke="currentColor" strokeWidth="1.5" opacity="0.6" />
                <line x1="10" y1="18" x2="26" y2="18" stroke="currentColor" strokeWidth="1.5" opacity="0.6" />
                <circle cx="18" cy="32" r="3" fill="currentColor" />
              </svg>
            </div>
            <h3>Teleprompter</h3>
            <p>The script you'll record. Auto-scrolling, on the home, ready in one tap.</p>
            <div className="strat-foot mono">FILM-READY →</div>
          </a>
        </div>
      </section>

      {/* Two audiences */}
      <section className="who-split">
        <a href="#/realtors" className="who-split-card">
          <div className="who-split-eyebrow mono">FOR REALTORS</div>
          <div className="who-split-h">Win the listing.<br />Run the campaign.</div>
          <div className="who-split-body">
            Every home a strategy. Every strategy a deck, a calendar, and a teleprompter ready to record.
          </div>
          <div className="who-split-cta mono">EXPLORE REALTORS →</div>
        </a>
        <a href="#/loan-officers" className="who-split-card alt">
          <div className="who-split-eyebrow mono">FOR LOAN OFFICERS</div>
          <div className="who-split-h">Co-brand on every listing.<br />Stay in the room.</div>
          <div className="who-split-body">
            Eight flyer formats, daily content queue, and your photo + NMLS on every realtor partner's flyer.
          </div>
          <div className="who-split-cta mono">EXPLORE LOs →</div>
        </a>
      </section>

      {/* Sibling */}
      <section id="sibling" className="sibling">
        <div className="sibling-inner">
          <div className="sibling-eyebrow mono">PART OF THE FAMILY</div>
          <div className="sibling-row">
            <div className="sibling-card">
              <div className="sibling-name myloaniq">
                <span className="ml-my">my</span><span className="ml-loan">Loan</span><span className="ml-iq">IQ</span>
              </div>
              <div className="sibling-tag mono">MORTGAGE INTELLIGENCE, SIMPLIFIED</div>
              <p>The origination platform underneath. Pipeline, applications, underwriting, portfolio.</p>
            </div>
            <div className="sibling-x">×</div>
            <div className="sibling-card">
              <Wordmark variant={wordmark} size={32} lockup={lockup} />
              <div className="sibling-tag mono">EVERY LISTING, A STRATEGY</div>
              <p>The marketing surface on top. Flyers, decks, social plans, market intel — for realtors and LOs.</p>
            </div>
          </div>
          <div className="sibling-foot mono">
            <LolaOrb size={14} />
            <span>BOTH POWERED BY LOLA</span>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { HomePage });