/* PATTERN BOOK + FAQ — light stubs to keep top nav navigable */

const M = window.MAF;

function PatternBook() {
  const { navigate } = M.useRoute();
  return (
    <div className="wf-screen col" style={{ minHeight: '100vh' }}>
      <M.TopNav />
      <div className="col" style={{ padding: "48px 40px 24px" }}>
        <M.Eyebrow>The Pattern Book · Architecture by Lew Oliver</M.Eyebrow>
        <div className="t-h1" style={{ fontSize: 60, marginTop: 8, fontStyle: 'italic', fontWeight: 400 }}>
          Southern grace,<br/>European refinement.
        </div>
        <M.Note style={{ maxWidth: 580, marginTop: 12 }}>
          Guided by Lew Oliver's architectural vision, Madison Fields reimagines traditional
          Southern character with European refinement. Five styles, governed by the Pattern Book
          and ARB Guidelines; full PDF available for download.
        </M.Note>
      </div>
      <div className="row gap-3" style={{ padding: '16px 40px 32px', flexWrap: 'wrap' }}>
        {[
          ['Vernacular',    'Cottage scale. Honest materials, modest detailing, deep porches.'],
          ['Tidewater',     'Painted brick, standing-seam metal, shutters, pier foundation.'],
          ['Lowcountry',    'Raised foundations, broad porches, columns, soft palette.'],
          ['European',      'Stucco, stone, slate-look roofs, restrained ornament.'],
          ['Greek Revival', 'Pediment and columns, symmetrical massing, formal plan.'],
        ].map(([name, desc]) => (
          <div key={name} className="wf-card col" style={{ padding: 0, flex: '0 0 calc(33.333% - 11px)' }}>
            <M.Img label={`${name} · materials`} style={{ height: 260, borderRadius: 0, border: 'none' }}/>
            <div className="col gap-1" style={{ padding: 20 }}>
              <M.Eyebrow>Style</M.Eyebrow>
              <div className="t-h4">{name}</div>
              <M.Note style={{ fontSize: 13, marginTop: 4 }}>{desc}</M.Note>
            </div>
          </div>
        ))}
      </div>
      <div className="row gap-3" style={{ padding: '32px 40px 56px', background: 'var(--bg-secondary)' }}>
        <div className="col grow" style={{ maxWidth: 420 }}>
          <M.Eyebrow>Palette &amp; principles</M.Eyebrow>
          <div className="t-h3" style={{ marginTop: 8 }}>
            Warm whites, soft stone, copper, painted brick. Crafted interiors, memorable
            entry experiences, portages and enclosed gardens.
          </div>
          <button className="wf-btn wf-btn-ghost" style={{ marginTop: 16, alignSelf: 'flex-start' }}>
            Open Pattern Book PDF ↓
          </button>
        </div>
        <M.Img label="palette · material samples" style={{ flex: 1, height: 320 }}/>
      </div>
      <M.Footer />
    </div>
  );
}

function FAQ() {
  const { navigate } = M.useRoute();
  const sections = [
    { eyebrow: 'Reservation', heading: 'How the reservation process works.', items: [
      ['Who can reserve first?',                  'Members of The Rose Golf Club hold first priority through October 31. Priority position is determined by the date you became a Rose Member. After October 31, reservations are honored first come, first served.'],
      ['What does it take to reserve a homesite?','A refundable reservation, then a Lot Purchase Agreement (LPA) executed via DocuSign with a wire deposit per the LPA. Wire transfer only — the platform tracks status but does not process funds.'],
      ['What are the homesites priced at?',       'Between $300,000 and $500,000. Pricing for individual homesites will be released during the reservation period, well in advance of any buying decision.'],
      ['Can I save lots without reserving?',      'Yes — Save adds to your favorites; share with a spouse, agent, or banker via a read-only link.'],
    ]},
    { eyebrow: 'Builders & plans', heading: 'Working with the approved builders.', items: [
      ['How are builders assigned to lots?',      'Each lot has one or more approved builders. The Builder profile and Lot Detail pages show compatibility.'],
      ['How do I talk to a builder?',             'Use Inquire on the builder profile. The Madison Fields team handles a warm introduction. Conversation is direct from there.'],
      ['Can I go fully custom?',                  'Yes, within the Pattern Book and ARB Guidelines. Custom plans must still meet the architectural standards set by the design board.'],
    ]},
    { eyebrow: 'Neighborhood', heading: 'About Madison Fields.', items: [
      ['What is Madison Fields?',                 'An inspired enclave where Southern grace meets European sophistication — 147 homesites across 300 acres of Madison County, Georgia.'],
      ['How close is The Rose Golf Club?',        'Minutes away. Madison Fields is on an adjacent parcel; the two communities sit close to one another but are intentionally screened from view.'],
      ['Who is the architect?',                   "Lew Oliver guides the architectural vision. The Pattern Book and ARB Guidelines govern what gets built."],
      ['Who runs the HOA?',                       'Madison Fields. Detailed covenants available in the Pattern Book PDF.'],
    ]},
  ];
  return (
    <div className="wf-screen col" style={{ minHeight: '100vh' }}>
      <M.TopNav />
      <div className="col" style={{ padding: "48px 40px 32px" }}>
        <M.Eyebrow>The Walkthrough</M.Eyebrow>
        <div className="t-h1" style={{ fontSize: 56, marginTop: 8, fontStyle: 'italic', fontWeight: 400 }}>
          Frequently asked.
        </div>
      </div>
      <div className="col" style={{ padding: "0 40px 56px", gap: 56 }}>
        {sections.map((s, i) => (
          <div key={i} className="row" style={{ gap: 48, borderTop: '1px solid var(--neutral-200)', paddingTop: 32 }}>
            <div className="col" style={{ flex: 0, width: 280 }}>
              <M.Eyebrow>{s.eyebrow}</M.Eyebrow>
              <div className="t-h3" style={{ marginTop: 8 }}>{s.heading}</div>
            </div>
            <div className="col grow" style={{ gap: 20 }}>
              {s.items.map(([q, a], j) => (
                <div key={j} className="col gap-2" style={{ paddingBottom: 16, borderBottom: '1px solid var(--neutral-200)' }}>
                  <div className="t-h5">{q}</div>
                  <M.Note style={{ fontSize: 13, color: 'var(--neutral-700)', fontStyle: 'normal' }}>{a}</M.Note>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
      <M.Footer />
    </div>
  );
}

window.MAF.PatternBook = PatternBook;
window.MAF.FAQ = FAQ;