// V2 — Architectural. Archivo + Manrope. High contrast, wide-tracked, bold.
// Palette: charred cedar ink on bone white, single warm accent.

const V2_PAL = {
  bg: '#f6f3ec',         // bone
  bgAlt: '#ece7dc',      // stone
  ink: '#131211',        // charred cedar
  inkSoft: '#2e2a24',
  muted: '#6e6558',
  line: '#c9c0a9',
  accent: '#b6452a',     // rust (sparingly)
  water: '#d6dde0',
  sand: '#e8ddc1',
  card: '#ffffff',
};

const V2_FONT_DISPLAY = "'Archivo', system-ui, sans-serif";
const V2_FONT_BODY = "'Manrope', system-ui, sans-serif";
const V2_FONT_MONO = "'Geist Mono', ui-monospace, monospace";

function V2Wordmark({ size = 16, color }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, color: color || V2_PAL.ink }}>
      <div style={{ width: 28, height: 28, border: `1.5px solid ${color || V2_PAL.ink}`, display: 'grid', placeItems: 'center', fontFamily: V2_FONT_DISPLAY, fontSize: 11, fontWeight: 800, letterSpacing: 1 }}>DR</div>
      <div style={{ fontFamily: V2_FONT_DISPLAY, fontSize: size, fontWeight: 800, letterSpacing: 5, textTransform: 'uppercase' }}>Dune Ridge</div>
    </div>
  );
}

function V2Nav({ onReserve }) {
  return (
    <nav style={{ position: 'absolute', top: 0, left: 0, right: 0, padding: '28px 64px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 10, color: '#fff', mixBlendMode: 'difference' }}>
      <V2Wordmark color="#fff" />
      <div style={{ display: 'flex', gap: 32, fontFamily: V2_FONT_DISPLAY, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', fontWeight: 600 }}>
        {['Residences', 'Site', 'Amenities', 'Neighborhood', 'Contact'].map((l) => (
          <a key={l} href={`#${l.toLowerCase()}`} style={{ color: 'inherit', textDecoration: 'none' }}>{l}</a>
        ))}
      </div>
      <button onClick={onReserve} style={{ padding: '12px 22px', background: '#fff', color: '#000', border: 'none', fontFamily: V2_FONT_DISPLAY, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', fontWeight: 700, cursor: 'pointer', borderRadius: 0 }}>Reserve →</button>
    </nav>
  );
}

function V2Hero({ onReserve }) {
  const [timeIdx, setTimeIdx] = React.useState(2);
  const time = HERO_TIMES[timeIdx];
  return (
    <section style={{ position: 'relative', height: 900, overflow: 'hidden' }}>
      <V2Nav onReserve={onReserve} />
      {/* Full-bleed rendering */}
      {HERO_TIMES.map((t, i) => (
        <img key={t.key} src={t.src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: i === timeIdx ? 1 : 0, transition: 'opacity 1200ms ease' }} />
      ))}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.55) 100%)' }} />
      {/* Typographic statement, full-bleed over image */}
      <div style={{ position: 'absolute', left: 64, right: 64, bottom: 140, color: '#fff' }}>
        <div style={{ fontFamily: V2_FONT_MONO, fontSize: 11, letterSpacing: 4, textTransform: 'uppercase', marginBottom: 32, opacity: 0.85 }}>
          <span style={{ display: 'inline-block', width: 40, height: 1, background: '#fff', marginRight: 16, verticalAlign: 'middle' }} />
          Frankfort · Michigan · Betsy Lake
        </div>
        <h1 style={{ fontFamily: V2_FONT_DISPLAY, fontWeight: 800, fontSize: 200, lineHeight: 0.88, letterSpacing: -6, margin: 0, textTransform: 'uppercase', color: '#fff' }}>
          Dune<br />Ridge
        </h1>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 48 }}>
          <p style={{ fontSize: 19, lineHeight: 1.45, maxWidth: 440, margin: 0, opacity: 0.95, fontFamily: V2_FONT_BODY }}>
            Thirty architect-designed residences. Three black-gabled buildings stepped up a wooded ridge above Betsy Lake. The Ridge release now available. Waterfront units already reserved.
          </p>
          <div style={{ display: 'flex', gap: 12 }}>
            <button onClick={onReserve} style={{ padding: '20px 32px', background: '#fff', color: '#000', border: 'none', fontFamily: V2_FONT_DISPLAY, fontSize: 12, letterSpacing: 3, textTransform: 'uppercase', fontWeight: 700, cursor: 'pointer', borderRadius: 0 }}>Reserve a visit</button>
            <a href="#residences" style={{ padding: '20px 32px', background: 'transparent', color: '#fff', border: '1.5px solid #fff', fontFamily: V2_FONT_DISPLAY, fontSize: 12, letterSpacing: 3, textTransform: 'uppercase', fontWeight: 700, textDecoration: 'none' }}>Residences ↓</a>
          </div>
        </div>
      </div>
      {/* Time switcher, top right under nav */}
      <div style={{ position: 'absolute', top: 110, right: 64, display: 'flex', gap: 2, background: 'rgba(0,0,0,0.35)', padding: 2, backdropFilter: 'blur(6px)' }}>
        {HERO_TIMES.map((t, i) => (
          <button key={t.key} onClick={() => setTimeIdx(i)} style={{ padding: '10px 14px', background: i === timeIdx ? '#fff' : 'transparent', color: i === timeIdx ? '#000' : '#fff', border: 'none', fontFamily: V2_FONT_DISPLAY, fontSize: 10, letterSpacing: 2.5, textTransform: 'uppercase', fontWeight: 700, cursor: 'pointer', borderRadius: 0 }}>{t.label}</button>
        ))}
      </div>
    </section>
  );
}

function V2Marquee() {
  const items = ['The Ridge — now available', 'Waterfront — 12 of 12 reserved', 'The Bay — next release', 'Construction · Fall 2025', '30 residences', '25 boat slips', 'Delivery 2027', 'Frankfort · MI'];
  const loop = [...items, ...items];
  return (
    <div style={{ background: V2_PAL.ink, color: V2_PAL.bg, padding: '18px 0', overflow: 'hidden', borderTop: `1px solid ${V2_PAL.inkSoft}`, borderBottom: `1px solid ${V2_PAL.inkSoft}` }}>
      <div style={{ display: 'flex', gap: 48, animation: 'v2-marq 40s linear infinite', whiteSpace: 'nowrap' }}>
        {loop.map((x, i) => (
          <span key={i} style={{ fontFamily: V2_FONT_DISPLAY, fontSize: 14, letterSpacing: 4, textTransform: 'uppercase', fontWeight: 600 }}>
            {x} <span style={{ opacity: 0.4, marginLeft: 40 }}>◆</span>
          </span>
        ))}
      </div>
      <style>{`@keyframes v2-marq { to { transform: translateX(-50%); } }`}</style>
    </div>
  );
}

function V2Overview() {
  return (
    <section style={{ background: V2_PAL.bg, color: V2_PAL.ink, padding: '140px 64px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64 }}>
        <div>
          <div style={{ fontFamily: V2_FONT_MONO, fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', color: V2_PAL.muted, marginBottom: 16 }}>§ 01 / Overview</div>
          <div style={{ fontFamily: V2_FONT_DISPLAY, fontSize: 13, fontWeight: 700, letterSpacing: 3, textTransform: 'uppercase', color: V2_PAL.muted }}>The project</div>
        </div>
        <div>
          <h2 style={{ fontFamily: V2_FONT_DISPLAY, fontWeight: 800, fontSize: 84, letterSpacing: -3, lineHeight: 0.95, margin: '0 0 48px', textTransform: 'uppercase' }}>
            Lakeside architecture,<br /><span style={{ color: V2_PAL.accent }}>built to last.</span>
          </h2>
          <p style={{ fontSize: 20, lineHeight: 1.45, maxWidth: 780, margin: 0, color: V2_PAL.inkSoft, textWrap: 'pretty' }}>
            Dune Ridge is a thirty-two-unit waterfront development shaped by Scandinavian and Great Lakes vernacular — charred cedar siding, warm-white board-and-batten, black standing-seam roofs, and generous south-facing windows. Every residence looks out over Betsy Lake to the dune ridge beyond.
          </p>
        </div>
      </div>
      {/* Stats */}
      <div style={{ marginTop: 96, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: `2px solid ${V2_PAL.ink}` }}>
        {[
          { n: 30, l: 'Residences' },
          { n: 3, l: 'Buildings' },
          { n: 25, l: 'Boat slips' },
          { n: 12, l: 'Waterfront reserved' },
        ].map((s) => (
          <div key={s.l} style={{ padding: '40px 28px', borderRight: `1px solid ${V2_PAL.line}` }}>
            <div style={{ fontFamily: V2_FONT_DISPLAY, fontSize: 96, fontWeight: 800, letterSpacing: -3, lineHeight: 1, color: V2_PAL.ink }}>
              <CountUp to={s.n} />
            </div>
            <div style={{ fontFamily: V2_FONT_MONO, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: V2_PAL.muted, marginTop: 16 }}>{s.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function V2ParallaxStrip() {
  const ref = React.useRef(null);
  const offset = useParallax(ref, 0.4);
  return (
    <section ref={ref} style={{ position: 'relative', height: 620, overflow: 'hidden', background: V2_PAL.ink }}>
      <img src={IMG.aerialBackB} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '120%', objectFit: 'cover', transform: `translateY(${offset}px)`, willChange: 'transform' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.05))' }} />
      <div style={{ position: 'absolute', left: 64, bottom: 48, right: 64, color: '#fff', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
        <div style={{ fontFamily: V2_FONT_DISPLAY, fontSize: 64, fontWeight: 800, letterSpacing: -2, lineHeight: 0.95, textTransform: 'uppercase', maxWidth: 720 }}>
          Gabled rooflines set against the tree line.
        </div>
        <div style={{ fontFamily: V2_FONT_MONO, fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', opacity: 0.7 }}>Rendering 03 · Ridge approach, dusk</div>
      </div>
    </section>
  );
}

function V2Residences() {
  const [mode, setMode] = React.useState('2D');
  const plans = [
    { code: 'R', name: 'The Ridge', type: '2 BEDROOM · WALKOUT', sqft: '1,200', price: 'Low $900s', beds: 2, baths: 2 },
    { code: 'R+', name: 'The Ridge · Combined', type: '4 BEDROOM · ADJOINING', sqft: '2,400', price: 'From $1.65m', beds: 4, baths: 3 },
  ];
  return (
    <section id="residences" style={{ background: V2_PAL.bgAlt, color: V2_PAL.ink, padding: '140px 64px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 80 }}>
        <div>
          <div style={{ fontFamily: V2_FONT_MONO, fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', color: V2_PAL.muted, marginBottom: 16 }}>§ 02 / Residences</div>
          <h2 style={{ fontFamily: V2_FONT_DISPLAY, fontWeight: 800, fontSize: 120, letterSpacing: -4, lineHeight: 0.9, margin: 0, textTransform: 'uppercase' }}>Two plans</h2>
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 24, flexDirection: 'column', alignItems: 'flex-end' }}>
          <div style={{ fontFamily: V2_FONT_BODY, fontSize: 16, lineHeight: 1.5, maxWidth: 360, color: V2_PAL.inkSoft }}>
            Two Ridge floor plans. Walkout lower levels, vaulted top floors, adjoining pairs that combine into a four-bedroom. Final pricing locks March 15.
          </div>
          <div style={{ display: 'inline-flex', gap: 2, background: V2_PAL.bg, border: `1px solid ${V2_PAL.line}`, padding: 2 }}>
            {['2D', '3D'].map((m) => (
              <button key={m} onClick={() => setMode(m)} style={{ padding: '10px 20px', background: mode === m ? V2_PAL.ink : 'transparent', color: mode === m ? V2_PAL.bg : V2_PAL.ink, border: 'none', fontFamily: V2_FONT_DISPLAY, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', fontWeight: 700, cursor: 'pointer', borderRadius: 0 }}>{m === '2D' ? 'Plan · 2D' : 'Iso · 3D'}</button>
            ))}
          </div>
        </div>
      </div>

      {plans.map((p, i) => (
        <div key={p.code} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, borderTop: `2px solid ${V2_PAL.ink}`, paddingTop: 48, marginBottom: 48 }}>
          <div>
            <div style={{ display: 'flex', gap: 24, alignItems: 'baseline', marginBottom: 24 }}>
              <div style={{ fontFamily: V2_FONT_DISPLAY, fontSize: 120, fontWeight: 800, letterSpacing: -4, lineHeight: 0.8, color: V2_PAL.accent }}>{p.code}</div>
              <div>
                <div style={{ fontFamily: V2_FONT_MONO, fontSize: 10, letterSpacing: 3, color: V2_PAL.muted, textTransform: 'uppercase', marginBottom: 8 }}>{p.type}</div>
                <div style={{ fontFamily: V2_FONT_DISPLAY, fontSize: 48, fontWeight: 800, letterSpacing: -1, textTransform: 'uppercase' }}>{p.name}</div>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, marginBottom: 28, borderTop: `1px solid ${V2_PAL.line}`, borderBottom: `1px solid ${V2_PAL.line}` }}>
              {[['SQFT', p.sqft], ['BED', p.beds], ['BATH', p.baths], ['FROM', p.price]].map(([l, v]) => (
                <div key={l} style={{ padding: '16px 12px', borderRight: `1px solid ${V2_PAL.line}` }}>
                  <div style={{ fontFamily: V2_FONT_MONO, fontSize: 10, letterSpacing: 2, color: V2_PAL.muted, textTransform: 'uppercase', marginBottom: 6 }}>{l}</div>
                  <div style={{ fontFamily: V2_FONT_DISPLAY, fontSize: 20, fontWeight: 700, letterSpacing: -0.2 }}>{v}</div>
                </div>
              ))}
            </div>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: V2_PAL.inkSoft, maxWidth: 520, margin: '0 0 32px' }}>
              {i === 0
                ? 'Single-level plan with open kitchen and living, two corner bedrooms, two full baths, laundry, and a 12-foot lake-facing balcony. Nine-foot ceilings and floor-to-gable windows at the south end.'
                : 'Two adjoining A-plans combined. Separates as lock-off for guests, or lives as a single great-room residence. Two balconies, double island kitchen, four bedrooms.'}
            </p>
            <div style={{ display: 'flex', gap: 12 }}>
              <a href="#" style={{ padding: '14px 24px', background: V2_PAL.ink, color: V2_PAL.bg, textDecoration: 'none', fontFamily: V2_FONT_DISPLAY, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', fontWeight: 700 }}>Floor plan PDF ↓</a>
              <a href="#" style={{ padding: '14px 24px', border: `1.5px solid ${V2_PAL.ink}`, color: V2_PAL.ink, textDecoration: 'none', fontFamily: V2_FONT_DISPLAY, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', fontWeight: 700 }}>Interior spec sheet</a>
            </div>
          </div>
          <div style={{ aspectRatio: '1.4', background: V2_PAL.bg, border: `1px solid ${V2_PAL.line}`, position: 'relative' }}>
            <FloorPlan2D3D variant={i} C={V2_PAL} mode={mode} />
          </div>
        </div>
      ))}
    </section>
  );
}

function V2FloorPlan({ variant }) {
  const C = V2_PAL;
  if (variant === 0) {
    return (
      <svg viewBox="0 0 500 340" style={{ width: '100%', height: '100%' }}>
        <rect x="30" y="30" width="440" height="280" fill="none" stroke={C.ink} strokeWidth="2" />
        <rect x="30" y="30" width="260" height="180" fill="none" stroke={C.ink} strokeWidth="0.8" />
        <rect x="290" y="30" width="180" height="120" fill="none" stroke={C.ink} strokeWidth="0.8" />
        <rect x="290" y="150" width="180" height="100" fill="none" stroke={C.ink} strokeWidth="0.8" />
        <rect x="30" y="210" width="260" height="100" fill="none" stroke={C.ink} strokeWidth="0.8" />
        <rect x="290" y="250" width="180" height="60" fill={C.accent} opacity="0.08" stroke={C.ink} strokeWidth="0.5" strokeDasharray="3 3" />
        <rect x="150" y="110" width="100" height="22" fill={C.ink} opacity="0.15" />
        <text x="50" y="60" fontFamily={V2_FONT_MONO} fontSize="10" letterSpacing="2" fill={C.muted}>LIVING · KITCHEN</text>
        <text x="310" y="60" fontFamily={V2_FONT_MONO} fontSize="10" letterSpacing="2" fill={C.muted}>BEDROOM 1</text>
        <text x="310" y="180" fontFamily={V2_FONT_MONO} fontSize="10" letterSpacing="2" fill={C.muted}>BEDROOM 2</text>
        <text x="50" y="240" fontFamily={V2_FONT_MONO} fontSize="10" letterSpacing="2" fill={C.muted}>BATH · UTILITY</text>
        <text x="310" y="284" fontFamily={V2_FONT_MONO} fontSize="10" letterSpacing="2" fill={C.muted}>BALCONY ↓ LAKE</text>
        <text x="470" y="24" textAnchor="end" fontFamily={V2_FONT_DISPLAY} fontWeight="700" fontSize="14" letterSpacing="3" fill={C.ink}>A · 1,100 SQ FT</text>
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 500 340" style={{ width: '100%', height: '100%' }}>
      <rect x="20" y="30" width="460" height="280" fill="none" stroke={C.ink} strokeWidth="2" />
      <line x1="250" y1="30" x2="250" y2="310" stroke={C.accent} strokeWidth="1" strokeDasharray="4 4" />
      <rect x="20" y="30" width="230" height="170" fill="none" stroke={C.ink} strokeWidth="0.8" />
      <rect x="250" y="30" width="230" height="170" fill="none" stroke={C.ink} strokeWidth="0.8" />
      <rect x="20" y="200" width="115" height="110" fill="none" stroke={C.ink} strokeWidth="0.8" />
      <rect x="135" y="200" width="115" height="110" fill="none" stroke={C.ink} strokeWidth="0.8" />
      <rect x="250" y="200" width="115" height="110" fill="none" stroke={C.ink} strokeWidth="0.8" />
      <rect x="365" y="200" width="115" height="110" fill="none" stroke={C.ink} strokeWidth="0.8" />
      <rect x="90" y="100" width="80" height="18" fill={C.ink} opacity="0.15" />
      <rect x="320" y="100" width="80" height="18" fill={C.ink} opacity="0.15" />
      <text x="38" y="60" fontFamily={V2_FONT_MONO} fontSize="9" letterSpacing="2" fill={C.muted}>GREAT ROOM A</text>
      <text x="268" y="60" fontFamily={V2_FONT_MONO} fontSize="9" letterSpacing="2" fill={C.muted}>GREAT ROOM B</text>
      <text x="38" y="230" fontFamily={V2_FONT_MONO} fontSize="9" letterSpacing="2" fill={C.muted}>BED 1</text>
      <text x="153" y="230" fontFamily={V2_FONT_MONO} fontSize="9" letterSpacing="2" fill={C.muted}>BED 2</text>
      <text x="268" y="230" fontFamily={V2_FONT_MONO} fontSize="9" letterSpacing="2" fill={C.muted}>BED 3</text>
      <text x="383" y="230" fontFamily={V2_FONT_MONO} fontSize="9" letterSpacing="2" fill={C.muted}>BED 4</text>
      <text x="480" y="24" textAnchor="end" fontFamily={V2_FONT_DISPLAY} fontWeight="700" fontSize="14" letterSpacing="3" fill={C.ink}>B · 2,200 SQ FT · COMBINED</text>
    </svg>
  );
}

function V2Site() {
  return (
    <section id="site" style={{ background: V2_PAL.bg, color: V2_PAL.ink, padding: '140px 64px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', marginBottom: 64 }}>
        <div>
          <div style={{ fontFamily: V2_FONT_MONO, fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', color: V2_PAL.muted, marginBottom: 16 }}>§ 03 / Site plan</div>
          <h2 style={{ fontFamily: V2_FONT_DISPLAY, fontWeight: 800, fontSize: 120, letterSpacing: -4, lineHeight: 0.9, margin: 0, textTransform: 'uppercase' }}>Three releases.</h2>
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', fontSize: 16, lineHeight: 1.5, color: V2_PAL.inkSoft, maxWidth: 420 }}>
          The Ridge on the bluff, The Bay mid-slope, the Waterfront on the lake. Phased to release as each building prices and permits. The M22 bike trail runs along the ridge spine.
        </div>
      </div>
      <PhaseBar palette={V2_PAL} displayFont={V2_FONT_DISPLAY} monoFont={V2_FONT_MONO} />
      <div style={{ height: 56 }} />
      <SitePlan palette={V2_PAL} />
    </section>
  );
}

function V2Amenities() {
  const amenities = [
    { n: '01', t: 'Waterfront deck', d: 'Shared boardwalk, fire tables, Adirondack chairs, and dining at the water.' },
    { n: '02', t: '25 private slips', d: 'Deep-water boat slips, available as a homeowner add-on. Year-round storage.' },
    { n: '03', t: 'Wood-fired sauna', d: 'Dual changing rooms, rinse-off, and a cold plunge overlooking the bay.' },
    { n: '04', t: 'Trailhead', d: 'Direct access to the M22 bike trail and a pedestrian path to downtown.' },
    { n: '05', t: 'Storage barn', d: 'Dedicated bike, kayak, paddle, and ski storage for every residence.' },
    { n: '06', t: 'EV charging', d: 'Level-2 charging at every assigned parking spot. Future-ready.' },
  ];
  return (
    <section id="amenities" style={{ background: V2_PAL.ink, color: V2_PAL.bg, padding: '140px 64px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 72 }}>
        <div>
          <div style={{ fontFamily: V2_FONT_MONO, fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', color: V2_PAL.bgAlt, opacity: 0.6, marginBottom: 16 }}>§ 04 / Amenities</div>
          <h2 style={{ fontFamily: V2_FONT_DISPLAY, fontWeight: 800, fontSize: 120, letterSpacing: -4, lineHeight: 0.9, margin: 0, textTransform: 'uppercase' }}>Shared<br />by design.</h2>
        </div>
        <div style={{ fontFamily: V2_FONT_BODY, fontSize: 16, lineHeight: 1.5, color: V2_PAL.bgAlt, opacity: 0.85, maxWidth: 360 }}>
          Six shared amenities — each one earns its footprint. No gym nobody uses. No lobby nobody lingers in.
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: `1px solid ${V2_PAL.inkSoft}`, borderLeft: `1px solid ${V2_PAL.inkSoft}` }}>
        {amenities.map((a) => (
          <div key={a.n} style={{ padding: 40, borderRight: `1px solid ${V2_PAL.inkSoft}`, borderBottom: `1px solid ${V2_PAL.inkSoft}`, minHeight: 260 }}>
            <div style={{ fontFamily: V2_FONT_MONO, fontSize: 11, letterSpacing: 3, color: V2_PAL.accent, marginBottom: 40 }}>{a.n}</div>
            <div style={{ fontFamily: V2_FONT_DISPLAY, fontSize: 32, fontWeight: 800, letterSpacing: -0.8, textTransform: 'uppercase', marginBottom: 12 }}>{a.t}</div>
            <div style={{ fontSize: 14, lineHeight: 1.55, opacity: 0.75, fontFamily: V2_FONT_BODY }}>{a.d}</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div style={{ aspectRatio: '1.6', position: 'relative', overflow: 'hidden' }}>
          <img src={IMG.dockSunset} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
        <div style={{ aspectRatio: '1.6', position: 'relative', overflow: 'hidden' }}>
          <img src={IMG.dockBSunset} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
      </div>
    </section>
  );
}

function V2Lifestyle({ onOpenLightbox }) {
  const items = [
    { src: IMG.elevLake, label: 'Frankfort Beach', sub: '6 min drive' },
    { src: IMG.trailSunset, label: 'M22 Trail', sub: 'On-site' },
    { src: IMG.dockMorning, label: 'Downtown marina', sub: '10 min by bike' },
    { src: IMG.aerialBayC, label: 'Charter fishing', sub: 'Betsy Bay' },
    { src: IMG.elevTrail, label: 'Platte River', sub: 'Kayak route' },
    { src: IMG.aerialBackC, label: 'Sleeping Bear Dunes', sub: '22 min' },
  ];
  return (
    <section id="neighborhood" style={{ background: V2_PAL.bg, color: V2_PAL.ink, padding: '140px 64px' }}>
      <div style={{ marginBottom: 64 }}>
        <div style={{ fontFamily: V2_FONT_MONO, fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', color: V2_PAL.muted, marginBottom: 16 }}>§ 05 / Neighborhood</div>
        <h2 style={{ fontFamily: V2_FONT_DISPLAY, fontWeight: 800, fontSize: 120, letterSpacing: -4, lineHeight: 0.9, margin: 0, textTransform: 'uppercase' }}>Frankfort,<br />in full.</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2 }}>
        {items.map((g, i) => (
          <div key={i} onClick={() => onOpenLightbox(i % GALLERY.length)} style={{ position: 'relative', aspectRatio: '4/5', overflow: 'hidden', cursor: 'pointer' }}>
            <img src={g.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.7))' }} />
            <div style={{ position: 'absolute', left: 24, bottom: 24, right: 24, color: '#fff' }}>
              <div style={{ fontFamily: V2_FONT_DISPLAY, fontSize: 24, fontWeight: 800, letterSpacing: -0.5, textTransform: 'uppercase' }}>{g.label}</div>
              <div style={{ fontFamily: V2_FONT_MONO, fontSize: 10, letterSpacing: 2.5, opacity: 0.85, marginTop: 4, textTransform: 'uppercase' }}>{g.sub}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function V2Flyover() {
  return (
    <section style={{ background: V2_PAL.bgAlt, color: V2_PAL.ink, padding: '120px 64px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div style={{ fontFamily: V2_FONT_MONO, fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', color: V2_PAL.muted, marginBottom: 16 }}>§ 00 / Interactive tour</div>
          <h2 style={{ fontFamily: V2_FONT_DISPLAY, fontWeight: 800, fontSize: 96, letterSpacing: -3, lineHeight: 0.9, margin: '0 0 28px', textTransform: 'uppercase' }}>Step<br /><span style={{ color: V2_PAL.accent }}>inside.</span></h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, maxWidth: 420, color: V2_PAL.inkSoft, margin: 0, fontFamily: V2_FONT_BODY }}>
            The ridge is sixty feet up a sand bluff — impossible to show on foot. Drop into a 360° rendering of a Ridge unit and drag to look around, from great room to balcony to sunset.
          </p>
        </div>
        <div style={{ aspectRatio: '16/9', width: '100%' }}>
          <VirtualTour palette={V2_PAL} label="Ridge unit · 360° rendering" caption="Preliminary · drag to explore" />
        </div>
      </div>
    </section>
  );
}

function V2Contact({ onReserve }) {
  return (
    <section id="contact" style={{ background: V2_PAL.accent, color: V2_PAL.bg, padding: '140px 64px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 96, alignItems: 'start' }}>
        <div>
          <div style={{ fontFamily: V2_FONT_MONO, fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', opacity: 0.75, marginBottom: 16 }}>§ 06 / Visit</div>
          <h2 style={{ fontFamily: V2_FONT_DISPLAY, fontWeight: 800, fontSize: 160, letterSpacing: -5, lineHeight: 0.88, margin: '0 0 48px', textTransform: 'uppercase' }}>See it<br />in May.</h2>
          <p style={{ fontSize: 22, lineHeight: 1.4, maxWidth: 560, margin: '0 0 56px', fontFamily: V2_FONT_BODY }}>
            Private previews open Memorial Day weekend. Book a walkthrough with our sales team and we'll handle the ferry from Traverse City.
          </p>
          <button onClick={onReserve} style={{ padding: '22px 40px', background: V2_PAL.ink, color: V2_PAL.bg, border: 'none', fontFamily: V2_FONT_DISPLAY, fontSize: 14, letterSpacing: 4, textTransform: 'uppercase', fontWeight: 800, cursor: 'pointer', borderRadius: 0 }}>Reserve a visit →</button>
          <div style={{ marginTop: 48 }}>
            <BrokerCard palette={{ ...V2_PAL, bg: V2_PAL.bg, bgAlt: V2_PAL.bgAlt }} displayFont={V2_FONT_DISPLAY} bodyFont={V2_FONT_BODY} monoFont={V2_FONT_MONO} />
          </div>
        </div>
        <div style={{ borderTop: `1px solid rgba(246,243,236,0.3)`, paddingTop: 24 }}>
          {[
            ['Sales Office', '412 Main Street\nFrankfort, MI 49635'],
            ['Hours', 'Wed – Sun · 10a – 5p\nBy appointment'],
            ['Contact', 'hello@duneridge.co\n(231) 555-0142'],
            ['Follow', '@duneridge.co\nInstagram'],
          ].map(([l, v]) => (
            <div key={l} style={{ padding: '20px 0', borderBottom: `1px solid rgba(246,243,236,0.3)` }}>
              <div style={{ fontFamily: V2_FONT_MONO, fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', opacity: 0.75, marginBottom: 8 }}>{l}</div>
              <div style={{ fontFamily: V2_FONT_DISPLAY, fontSize: 20, fontWeight: 700, whiteSpace: 'pre-line', lineHeight: 1.3 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function V2Footer() {
  return (
    <footer style={{ background: V2_PAL.ink, color: V2_PAL.bg, padding: '72px 64px 36px' }}>
      <div style={{ fontFamily: V2_FONT_DISPLAY, fontSize: 200, fontWeight: 900, letterSpacing: -8, lineHeight: 0.9, textTransform: 'uppercase', margin: '0 0 40px' }}>Dune Ridge</div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', paddingTop: 32, borderTop: `1px solid ${V2_PAL.inkSoft}`, fontFamily: V2_FONT_MONO, fontSize: 10, letterSpacing: 2.5, textTransform: 'uppercase', opacity: 0.7 }}>
        <span>© 2026 Dune Ridge LLC</span>
        <span>Architecture · Northwood Studio</span>
        <span>Developer · Ridge & Bay Group</span>
        <span>Frankfort · Michigan</span>
      </div>
    </footer>
  );
}

function SiteV2() {
  const [resOpen, setResOpen] = React.useState(false);
  const lb = useLightbox(GALLERY);
  return (
    <div data-site-root="v2" style={{ background: V2_PAL.bg, color: V2_PAL.ink, fontFamily: V2_FONT_BODY, width: '100%', maxWidth: '100%', overflow: 'hidden' }}>
      <V2Hero onReserve={() => setResOpen(true)} />
      <V2Marquee />
      <V2Overview />
      <V2Flyover />
      <V2ParallaxStrip />
      <V2Residences />
      <V2Site />
      <V2Amenities />
      <V2Lifestyle onOpenLightbox={lb.open} />
      <V2Contact onReserve={() => setResOpen(true)} />
      <V2Footer />
      <ReservationModal open={resOpen} onClose={() => setResOpen(false)} palette={V2_PAL} accentLabel="Dune Ridge" />
      {lb.node}
    </div>
  );
}

Object.assign(window, { SiteV2, V2_PAL });