// Proposal page — final tab in the deck. Renders the full proposal in the wireframe aesthetic.
// Long-form column layout (not the side-by-side mobile/desktop frames).

const { Fragment: PFragment } = React;

function ProposalSection({ title, children, accent }) {
  return (
    <section className="proposal-section">
      <div className="proposal-section-head" style={accent ? { background: 'var(--sun)' } : {}}>
        <h3>{title}</h3>
      </div>
      <div className="proposal-section-body">
        {children}
      </div>
    </section>);

}

function PStickyNote({ children, tone }) {
  return (
    <aside className={`proposal-sticky ${tone || ''}`}>
      <span className="x">×</span>
      {children}
    </aside>);

}

function ProposalPage() {
  return (
    <div className="proposal-doc">
      {/* Cover */}
      <header className="proposal-cover">
        <div className="proposal-cover-mark"></div>
        <h1>The Beluga Bevco<br />Launch Website</h1>
        <div className="proposal-cover-sub">A proposal from Tayler · for Toby & Alissa · Tulsa, OK</div>
        <div className="proposal-cover-meta">
          <span>Base build · $2,000</span>
          <span>Add-ons · $350 each</span>
          <span>Live: June 2026</span>
        </div>
      </header>

      <ProposalSection title="What you're getting · Base build · $2,000" accent>
        <p className="lead" style={{ fontSize: "19px" }}>
          A fast, mobile-first launch site for Beluga Bevco. Function-first.
        </p>
        <ul className="proposal-checklist">
          <li><strong>Four tight pages.</strong> Home, Menu + Taps (one page, two anchors), Visit, About.</li>
          <li><strong>HTML menu + tap list, one page.</strong> Crawlable text. Google can read every dish, every beer, every price.</li>
          <li><strong>Rewards in the footer.</strong> Sign-up modal, two join paths, runs through the POS. No separate accounts, no inbox spam.</li>
          <li><strong>Top-level access.</strong> Hours, menu, address, phone, taps. One tap from anywhere.</li>
          <li><strong>Listings claimed at launch.</strong> Yelp · Google Business · Apple Business Connect · Bing Places.</li>
          <li><strong>Technical SEO foundation.</strong> SSL, schema markup, sitemap, robots.txt.</li>
          <li><strong>Speed.</strong> Real images that don't take forever to load.</li>
          <li><strong>Two rounds of revision.</strong> Plus a 30-day post-launch tune-up window.</li>
        </ul>
      </ProposalSection>

      <ProposalSection title="The six add-ons · $350 each">
        <p className="lead">
          À la carte. Pick none, pick all six. They ghost in on the Base+ wireframe
          so you can see exactly where each one lives before you buy.
        </p>
        <div className="addon-grid">
          {[
          ['Event calendar', 'New /events page. Calendar + list + filters. 3-up "This Week" band on Home. Foundation for ticketed events, member RSVPs, and the Reservation listings add-on.', true, "TAYLER'S PICK. The calendar is the foundation. Everything event-related (RSVPs, member-only nights, ticketed events) builds off of it. Pick this one even if you pick nothing else.", null, 'foundation'],
          ['Brewroom inquiry', 'Form module on Visit. Name, email, phone, batch size, preferred date, notes.'],
          ['Private room inquiry', 'Form module on Visit. Room dropdown (Boardroom, Library, Engine, Small Private), date, party size, notes.'],
          ['Newsletter', 'Real signup module: name + email + text-opt-in + interest tags. Replaces Base footer email.', true, "GRADUATE PICK. Real marketing channel, real ongoing work. Pick this when someone's actually going to write to the list. Skip it if you're not ready. Add it later when you are."],
          ['Blog', 'New /blog page. 3-up "Latest" band on Home. Posts can be seeded from @belugabevco IG captions.', true, "TAYLER'S PICK. SEO + AEO power. Google and the AI search engines reward sites that publish. Your Instagram captions can feed this: write once, post twice. Press hits from Tom and Mike Grogan land here."],
          ['Reservation listings', 'Badge row on Visit below the map: OpenTable · Resy · TripAdvisor · Google Reservations. Powers "book" buttons on ticketed events.', false, null, 'Event calendar']].
          map(([name, desc, picked, note, requires, role]) =>
          <div key={name} className={`addon-card ${picked ? 'picked' : ''}`}>
              <div className="addon-head">
                <span className="addon-name">{name}</span>
                <span className="addon-price">$350</span>
              </div>
              {(role || requires) &&
            <div className="addon-meta">
                  {role === 'foundation' && <span className="meta-chip foundation">★ foundation</span>}
                  {requires && <span className="meta-chip requires">↑ needs {requires}</span>}
                </div>
            }
              <div className="addon-desc">{desc}</div>
              {picked && note &&
            <PStickyNote tone={name === 'Newsletter' ? 'cream' : ''}>
                  {note}
                </PStickyNote>
            }
            </div>
          )}
        </div>
      </ProposalSection>

      <ProposalSection title="My picks (if you want my read)" accent>
        <ol className="picks">
          <li>
            <strong>Event calendar.</strong> The foundation. Everything event-shaped depends on it.
          </li>
          <li>
            <strong>Blog.</strong> SEO + AEO. Your Instagram captions can feed it. Press hits land here.
          </li>
          <li>
            <strong>Newsletter.</strong> Graduate to it. Real marketing requires real writing. Pick it when you're ready.
          </li>
        </ol>
        <p className="footnote">
          Brewroom, Private room, Reservation listings: all sound buys, lower urgency than the three above. Add when you start running into the workflow they solve.
        </p>
      </ProposalSection>

      <ProposalSection title="All-in math">
        <table className="proposal-math">
          <tbody>
            <tr><td>Base build</td><td className="num">$2,000</td></tr>
            <tr><td>6 add-on options - à la carte</td><td className="num">$2,100</td></tr>
            <tr className="total"><td>All-in (everything)</td><td className="num">$4,100</td></tr>
          </tbody>
        </table>
      </ProposalSection>

      <ProposalSection title="Maintenance · after launch">
        <ul className="proposal-checklist">
          <li><strong>Free period.</strong> First 6 months at no charge.</li>
          <li><strong>First quote.</strong> Delivered at month 3.</li>
          <li><strong>First bill.</strong> Issued at month 6.</li>
          <li><strong>Billing.</strong> Paid in advance. Monthly or quarterly.</li>
          <li><strong>Range.</strong> $100–150 per month. TBD.</li>
        </ul>
      </ProposalSection>

      <ProposalSection title="Timeline &amp; payment">
        <div className="timeline">
          <div className="step"><div className="step-num">1</div><div><strong>Sign + 50% deposit.</strong> Kick off.</div></div>
          <div className="step"><div className="step-num">2</div><div><strong>Build.</strong> 2-3 weeks Base. 3-4 weeks with add-ons. Wireframes lock, design, content, staging.</div></div>
          <div className="step"><div className="step-num">3</div><div><strong>Design approval + 25%.</strong> Walk-through together. Two rounds of revisions per page.</div></div>
          <div className="step"><div className="step-num">4</div><div><strong>Launch + 25%.</strong> Live the same week the doors are.</div></div>
        </div>
      </ProposalSection>

      <ProposalSection title="What to expect from me">
        <ul className="bullets">
          <li>Direct line. Text or call, answered same-day on weekdays.</li>
          <li>Plain-English progress updates. No jargon.</li>
          <li>Wireframes and copy decisions get walked-through together. Nothing surprises you.</li>
        </ul>
      </ProposalSection>

      <ProposalSection title="What I'll need from you">
        <ul className="bullets">
          <li>Final tagline call (Taps and Plants is the leader?).</li>
          <li>Logo file when ready.</li>
          <li>Photos: patio, interior, food, founders portrait. Real, not stock.</li>
          <li>Confirmed open hours.</li>
          <li>Founders "About Us" story copy (or a 20-min call to draft it together).</li>
          <li>POS choice (Square, Clover, Etc.).</li>
        </ul>
      </ProposalSection>

      <ProposalSection title="Next steps">
        <ol className="next-steps">
          <li>Walk through the wireframes together. Mark up anything that doesn't sit right.</li>
          <li>Pick your add-ons, if any at all.</li>
          <li>Sign + deposit. I start the build.</li>
        </ol>
      </ProposalSection>

      <footer className="proposal-foot">
        <div className="proposal-foot-mark"></div>
        <div className="proposal-foot-meta">
          Beluga Bevco · belugabevco.com · Eton Square, Tulsa, OK · Opening June 2026
        </div>
      </footer>
    </div>);

}

Object.assign(window, { ProposalPage });