// V3 — Quiet Modern. Instrument Serif italic accents + Geist sans.
// Palette: fog white, soft sand, single deep-water accent. Maximum negative space.

const V3_PAL = {
  bg: '#eae4d5',         // warm fog
  bgAlt: '#dfd7c3',      // sand
  bgDeep: '#c7bfa8',
  ink: '#25221c',        // warm near-black
  inkSoft: '#4a4539',
  muted: '#857c68',
  line: '#c2b99e',
  accent: '#3a4a4c',     // deep water green
  accentSoft: '#6f8183',
  card: '#f2ecde',
};

const V3_FONT_DISPLAY = "'Geist', system-ui, sans-serif";
const V3_FONT_SERIF = "'Instrument Serif', Georgia, serif";
const V3_FONT_MONO = "'Geist Mono', ui-monospace, monospace";

function V3Wordmark({ size = 15, color }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, color: color || V3_PAL.ink, fontFamily: V3_FONT_DISPLAY, fontSize: size, fontWeight: 500, letterSpacing: 4, textTransform: 'uppercase' }}>
      <span>Dune</span>
      <span style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontWeight: 400, letterSpacing: 0, textTransform: 'none', fontSize: size * 1.1, opacity: 0.7 }}>&</span>
      <span>Ridge</span>
    </div>
  );
}

function V3Nav({ onReserve }) {
  return (
    <nav style={{ position: 'absolute', top: 0, left: 0, right: 0, padding: '32px 80px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 10 }}>
      <V3Wordmark />
      <div style={{ display: 'flex', gap: 36, fontFamily: V3_FONT_DISPLAY, fontSize: 13, color: V3_PAL.inkSoft, fontWeight: 400 }}>
        {['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: '10px 18px', background: 'transparent', color: V3_PAL.ink, border: `1px solid ${V3_PAL.ink}`, fontFamily: V3_FONT_DISPLAY, fontSize: 12, letterSpacing: 1, cursor: 'pointer', borderRadius: 999 }}>Reserve →</button>
    </nav>
  );
}

function V3Hero({ onReserve }) {
  const [timeIdx, setTimeIdx] = React.useState(2);
  return (
    <section style={{ position: 'relative', minHeight: 960, background: V3_PAL.bg, display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
      <V3Nav onReserve={onReserve} />
      {/* Left — quiet typographic statement */}
      <div style={{ padding: '200px 80px 100px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontFamily: V3_FONT_MONO, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: V3_PAL.muted, marginBottom: 48 }}>
            № 01 &nbsp; Frankfort, Michigan
          </div>
          <h1 style={{ fontFamily: V3_FONT_DISPLAY, fontWeight: 300, fontSize: 112, lineHeight: 0.98, letterSpacing: -4, margin: '0 0 0', color: V3_PAL.ink }}>
            Built<br />
            for the <span style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontWeight: 400, letterSpacing: -3 }}>quiet</span><br />
            hours.
          </h1>
          <p style={{ fontFamily: V3_FONT_SERIF, fontSize: 26, lineHeight: 1.4, color: V3_PAL.inkSoft, maxWidth: 440, margin: '48px 0 0', fontWeight: 400 }}>
            Thirty-two lakeside residences on Betsy Lake — a Scandinavian sensibility applied to the Michigan coast.
          </p>
        </div>
        <div style={{ marginTop: 80, display: 'flex', gap: 32, alignItems: 'center' }}>
          <button onClick={onReserve} style={{ padding: '16px 28px', background: V3_PAL.ink, color: V3_PAL.bg, border: 'none', fontFamily: V3_FONT_DISPLAY, fontSize: 13, letterSpacing: 0.5, cursor: 'pointer', borderRadius: 999 }}>Reserve a private visit</button>
          <a href="#overview" style={{ color: V3_PAL.ink, fontFamily: V3_FONT_DISPLAY, fontSize: 13, textDecoration: 'none', borderBottom: `1px solid ${V3_PAL.ink}`, paddingBottom: 2 }}>Learn more ↓</a>
        </div>
      </div>
      {/* Right — rendering, off-center with generous margin */}
      <div style={{ padding: '140px 80px 80px 0', position: 'relative' }}>
        <div style={{ position: 'relative', width: '100%', height: '100%', minHeight: 640 }}>
          {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', left: -1, top: 24, padding: '6px 12px', background: V3_PAL.bg, fontFamily: V3_FONT_MONO, fontSize: 10, letterSpacing: 2, color: V3_PAL.muted, textTransform: 'uppercase' }}>View № {timeIdx + 1} / 3</div>
        </div>
        <div style={{ marginTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontSize: 20, color: V3_PAL.inkSoft }}>{HERO_TIMES[timeIdx].caption}.</div>
          <div style={{ display: 'flex', gap: 4 }}>
            {HERO_TIMES.map((t, i) => (
              <button key={t.key} onClick={() => setTimeIdx(i)} style={{ padding: '8px 14px', background: i === timeIdx ? V3_PAL.ink : 'transparent', color: i === timeIdx ? V3_PAL.bg : V3_PAL.ink, border: `1px solid ${i === timeIdx ? V3_PAL.ink : V3_PAL.line}`, fontFamily: V3_FONT_MONO, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', cursor: 'pointer', borderRadius: 999 }}>{t.label}</button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function V3Overview() {
  return (
    <section id="overview" style={{ background: V3_PAL.bg, color: V3_PAL.ink, padding: '180px 80px' }}>
      <div style={{ maxWidth: 980, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ fontFamily: V3_FONT_MONO, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: V3_PAL.muted, marginBottom: 40 }}>№ 02 &nbsp; The Project</div>
        <h2 style={{ fontFamily: V3_FONT_DISPLAY, fontWeight: 300, fontSize: 64, lineHeight: 1.1, letterSpacing: -1.5, margin: 0, textWrap: 'balance' }}>
          A place where the <span style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontWeight: 400 }}>architecture</span> quiets itself — so the <span style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontWeight: 400 }}>lake</span> can speak.
        </h2>
      </div>
      {/* Stats — minimal, centered */}
      <div style={{ marginTop: 120, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32, maxWidth: 1120, margin: '120px auto 0' }}>
        {[
          { n: 32, l: 'Residences' },
          { n: 4, l: 'Buildings' },
          { n: 25, l: 'Slips' },
          { n: 700, l: 'From $', asK: true },
        ].map((s) => (
          <div key={s.l} style={{ textAlign: 'center' }}>
            <div style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontSize: 88, fontWeight: 400, letterSpacing: -2, lineHeight: 1, color: V3_PAL.accent }}>
              <CountUp to={s.n} suffix={s.asK ? 'k' : ''} />
            </div>
            <div style={{ fontFamily: V3_FONT_MONO, fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', color: V3_PAL.muted, marginTop: 20 }}>{s.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function V3ParallaxStrip() {
  const ref = React.useRef(null);
  const offset = useParallax(ref, 0.3);
  return (
    <section ref={ref} style={{ position: 'relative', height: 560, overflow: 'hidden', background: V3_PAL.accent }}>
      <img src={IMG.aerialBackA} 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.15), rgba(0,0,0,0.25))' }} />
      <div style={{ position: 'absolute', bottom: 56, left: 80, right: 80, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', color: V3_PAL.bg }}>
        <div style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontWeight: 400, fontSize: 56, lineHeight: 1.1, maxWidth: 620, letterSpacing: -1 }}>
          The view from the ridge, ninety minutes before sunset.
        </div>
        <div style={{ fontFamily: V3_FONT_MONO, fontSize: 10, letterSpacing: 2.5, opacity: 0.85, textTransform: 'uppercase' }}>Rendering № 03</div>
      </div>
    </section>
  );
}

function V3Residences() {
  const plans = [
    { code: 'I', name: 'The Dune', type: 'Two bedroom', sqft: '1,100', price: '725,000', beds: 2, baths: 2, note: 'Open great room. Two balconies. South-facing gable.' },
    { code: 'II', name: 'The Ridge', type: 'Four bedroom, combined', sqft: '2,200', price: '1,450,000', beds: 4, baths: 3, note: 'Two units joined. Locks off for guests.' },
  ];
  const [active, setActive] = React.useState(0);
  const p = plans[active];
  return (
    <section id="residences" style={{ background: V3_PAL.card, color: V3_PAL.ink, padding: '180px 80px' }}>
      <div style={{ textAlign: 'center', marginBottom: 80 }}>
        <div style={{ fontFamily: V3_FONT_MONO, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: V3_PAL.muted, marginBottom: 24 }}>№ 03 &nbsp; Residences</div>
        <h2 style={{ fontFamily: V3_FONT_DISPLAY, fontWeight: 300, fontSize: 96, letterSpacing: -3, lineHeight: 0.98, margin: 0 }}>
          Two plans. <span style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontWeight: 400, color: V3_PAL.accent }}>One idea.</span>
        </h2>
      </div>

      {/* Tab toggle */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: 2, marginBottom: 64 }}>
        {plans.map((pl, i) => (
          <button key={pl.code} onClick={() => setActive(i)} style={{ padding: '14px 32px', background: i === active ? V3_PAL.ink : 'transparent', color: i === active ? V3_PAL.bg : V3_PAL.ink, border: `1px solid ${V3_PAL.ink}`, fontFamily: V3_FONT_DISPLAY, fontSize: 13, letterSpacing: 0.5, cursor: 'pointer', borderRadius: 999, ...(i === 0 ? {} : { marginLeft: -1 }) }}>
            <span style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', marginRight: 10 }}>{pl.code}</span>
            {pl.type}
          </button>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center', maxWidth: 1200, margin: '0 auto' }}>
        <div>
          <div style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontWeight: 400, fontSize: 180, lineHeight: 0.9, letterSpacing: -8, color: V3_PAL.accent, marginBottom: -20 }}>{p.code}</div>
          <div style={{ fontFamily: V3_FONT_MONO, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: V3_PAL.muted, marginBottom: 12 }}>{p.type}</div>
          <h3 style={{ fontFamily: V3_FONT_DISPLAY, fontWeight: 300, fontSize: 64, letterSpacing: -1.5, lineHeight: 1, margin: '0 0 24px' }}>{p.name}</h3>
          <p style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontSize: 24, lineHeight: 1.4, color: V3_PAL.inkSoft, margin: '0 0 40px' }}>{p.note}</p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: `1px solid ${V3_PAL.line}`, borderBottom: `1px solid ${V3_PAL.line}`, marginBottom: 32 }}>
            {[['Size', `${p.sqft} sqft`], ['Beds', p.beds], ['Baths', p.baths], ['From', `$${p.price}`]].map(([l, v]) => (
              <div key={l} style={{ padding: '18px 0' }}>
                <div style={{ fontFamily: V3_FONT_MONO, fontSize: 10, letterSpacing: 2.5, textTransform: 'uppercase', color: V3_PAL.muted, marginBottom: 6 }}>{l}</div>
                <div style={{ fontFamily: V3_FONT_DISPLAY, fontSize: 18, fontWeight: 500 }}>{v}</div>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            <a href="#" style={{ padding: '14px 24px', background: V3_PAL.ink, color: V3_PAL.bg, textDecoration: 'none', fontFamily: V3_FONT_DISPLAY, fontSize: 13, borderRadius: 999 }}>Download floor plan ↓</a>
            <a href="#" style={{ padding: '14px 24px', border: `1px solid ${V3_PAL.ink}`, color: V3_PAL.ink, textDecoration: 'none', fontFamily: V3_FONT_DISPLAY, fontSize: 13, borderRadius: 999 }}>Specifications</a>
          </div>
        </div>
        <div style={{ aspectRatio: '1/1.1', background: V3_PAL.bg, border: `1px solid ${V3_PAL.line}`, padding: 24 }}>
          <V3FloorPlan variant={active} />
        </div>
      </div>

      {/* Feature strip */}
      <div style={{ marginTop: 120, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, borderTop: `1px solid ${V3_PAL.line}`, paddingTop: 40 }}>
        {[
          ['9 ft', 'Ceilings'],
          ['Oak', 'Wide plank'],
          ['Gable', 'Windows'],
          ['Heat pump', 'All-season'],
          ['EV', 'Ready'],
        ].map(([a, b]) => (
          <div key={b} style={{ textAlign: 'center' }}>
            <div style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontSize: 40, fontWeight: 400, letterSpacing: -1 }}>{a}</div>
            <div style={{ fontFamily: V3_FONT_MONO, fontSize: 10, letterSpacing: 2.5, textTransform: 'uppercase', color: V3_PAL.muted, marginTop: 10 }}>{b}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function V3FloorPlan({ variant }) {
  const C = V3_PAL;
  if (variant === 0) {
    return (
      <svg viewBox="0 0 400 440" style={{ width: '100%', height: '100%' }}>
        <rect x="20" y="20" width="360" height="400" fill="none" stroke={C.ink} strokeWidth="1.5" />
        <rect x="20" y="20" width="240" height="240" fill="none" stroke={C.ink} strokeWidth="0.5" />
        <rect x="260" y="20" width="120" height="130" fill="none" stroke={C.ink} strokeWidth="0.5" />
        <rect x="260" y="150" width="120" height="110" fill="none" stroke={C.ink} strokeWidth="0.5" />
        <rect x="20" y="260" width="240" height="100" fill="none" stroke={C.ink} strokeWidth="0.5" />
        <rect x="260" y="260" width="120" height="100" fill="none" stroke={C.ink} strokeWidth="0.5" />
        <rect x="20" y="360" width="360" height="60" fill={C.accentSoft} opacity="0.15" stroke={C.ink} strokeWidth="0.3" strokeDasharray="3 3" />
        <rect x="130" y="140" width="80" height="18" fill={C.ink} opacity="0.2" />
        <text x="34" y="46" fontFamily={V3_FONT_MONO} fontSize="9" letterSpacing="2" fill={C.muted}>LIVING</text>
        <text x="34" y="60" fontFamily={V3_FONT_MONO} fontSize="9" letterSpacing="2" fill={C.muted}>KITCHEN</text>
        <text x="274" y="46" fontFamily={V3_FONT_MONO} fontSize="9" letterSpacing="2" fill={C.muted}>BED 1</text>
        <text x="274" y="176" fontFamily={V3_FONT_MONO} fontSize="9" letterSpacing="2" fill={C.muted}>BED 2</text>
        <text x="34" y="286" fontFamily={V3_FONT_MONO} fontSize="9" letterSpacing="2" fill={C.muted}>BATH</text>
        <text x="274" y="286" fontFamily={V3_FONT_MONO} fontSize="9" letterSpacing="2" fill={C.muted}>UTILITY</text>
        <text x="34" y="396" fontFamily={V3_FONT_MONO} fontSize="9" letterSpacing="2" fill={C.muted}>BALCONY  ↓  LAKE</text>
        <g transform="translate(340, 440)">
          <line x1="0" y1="-10" x2="0" y2="0" stroke={C.ink} strokeWidth="0.8" />
          <polygon points="0,-14 -3,-7 3,-7" fill={C.ink} />
          <text x="-4" y="-20" textAnchor="end" fontFamily={V3_FONT_MONO} fontSize="8" letterSpacing="1.5" fill={C.muted}>N</text>
        </g>
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 440 440" style={{ width: '100%', height: '100%' }}>
      <rect x="20" y="20" width="400" height="400" fill="none" stroke={C.ink} strokeWidth="1.5" />
      <line x1="220" y1="20" x2="220" y2="420" stroke={C.accent} strokeWidth="1" strokeDasharray="4 4" />
      <rect x="20" y="20" width="200" height="200" fill="none" stroke={C.ink} strokeWidth="0.5" />
      <rect x="220" y="20" width="200" height="200" fill="none" stroke={C.ink} strokeWidth="0.5" />
      <rect x="20" y="220" width="100" height="200" fill="none" stroke={C.ink} strokeWidth="0.5" />
      <rect x="120" y="220" width="100" height="200" fill="none" stroke={C.ink} strokeWidth="0.5" />
      <rect x="220" y="220" width="100" height="200" fill="none" stroke={C.ink} strokeWidth="0.5" />
      <rect x="320" y="220" width="100" height="200" fill="none" stroke={C.ink} strokeWidth="0.5" />
      <rect x="80" y="110" width="80" height="18" fill={C.ink} opacity="0.2" />
      <rect x="280" y="110" width="80" height="18" fill={C.ink} opacity="0.2" />
      <text x="34" y="44" fontFamily={V3_FONT_MONO} fontSize="9" letterSpacing="2" fill={C.muted}>GREAT ROOM A</text>
      <text x="234" y="44" fontFamily={V3_FONT_MONO} fontSize="9" letterSpacing="2" fill={C.muted}>GREAT ROOM B</text>
      <text x="34" y="246" fontFamily={V3_FONT_MONO} fontSize="9" letterSpacing="2" fill={C.muted}>BED 1</text>
      <text x="134" y="246" fontFamily={V3_FONT_MONO} fontSize="9" letterSpacing="2" fill={C.muted}>BED 2</text>
      <text x="234" y="246" fontFamily={V3_FONT_MONO} fontSize="9" letterSpacing="2" fill={C.muted}>BED 3</text>
      <text x="334" y="246" fontFamily={V3_FONT_MONO} fontSize="9" letterSpacing="2" fill={C.muted}>BED 4</text>
      <circle cx="220" cy="220" r="14" fill={C.bg} stroke={C.accent} strokeWidth="1" />
      <text x="220" y="224" textAnchor="middle" fontFamily={V3_FONT_SERIF} fontStyle="italic" fontSize="14" fill={C.accent}>&amp;</text>
    </svg>
  );
}

function V3Tour() {
  return (
    <section id="tour" style={{ background: V3_PAL.card, color: V3_PAL.ink, padding: '180px 80px' }}>
      <div style={{ textAlign: 'center', marginBottom: 72 }}>
        <div style={{ fontFamily: V3_FONT_MONO, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: V3_PAL.muted, marginBottom: 24 }}>Nº 03½ &nbsp; Interactive tour</div>
        <h2 style={{ fontFamily: V3_FONT_DISPLAY, fontWeight: 300, fontSize: 88, letterSpacing: -3, lineHeight: 1, margin: 0 }}>
          Stand in the <span style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontWeight: 400, color: V3_PAL.accent }}>room.</span>
        </h2>
        <p style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontSize: 22, lineHeight: 1.45, color: V3_PAL.inkSoft, maxWidth: 560, margin: '32px auto 0' }}>
          A preliminary 360° rendering of a Ridge unit. Drag to look around.
        </p>
      </div>
      <div style={{ maxWidth: 1200, margin: '0 auto', aspectRatio: '16/9' }}>
        <VirtualTour palette={V3_PAL} label="Ridge unit · Preliminary 360° rendering" caption="Drag to explore" />
      </div>
    </section>
  );
}

function V3Site() {
  return (
    <section id="site" style={{ background: V3_PAL.bg, color: V3_PAL.ink, padding: '180px 80px' }}>
      <div style={{ textAlign: 'center', marginBottom: 72 }}>
        <div style={{ fontFamily: V3_FONT_MONO, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: V3_PAL.muted, marginBottom: 24 }}>№ 04 &nbsp; Site</div>
        <h2 style={{ fontFamily: V3_FONT_DISPLAY, fontWeight: 300, fontSize: 88, letterSpacing: -3, lineHeight: 1, margin: 0 }}>Four buildings, <span style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontWeight: 400, color: V3_PAL.accent }}>held</span> to the hill.</h2>
      </div>
      <SitePlan palette={V3_PAL} />
    </section>
  );
}

function V3Amenities() {
  return (
    <section id="amenities" style={{ background: V3_PAL.accent, color: V3_PAL.bg }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
        <div style={{ padding: '140px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{ fontFamily: V3_FONT_MONO, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: V3_PAL.bgAlt, opacity: 0.6, marginBottom: 24 }}>№ 05 &nbsp; Shared spaces</div>
          <h2 style={{ fontFamily: V3_FONT_DISPLAY, fontWeight: 300, fontSize: 80, letterSpacing: -2.5, lineHeight: 1, margin: '0 0 40px' }}>
            The dock is the <span style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontWeight: 400 }}>living room.</span>
          </h2>
          <p style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontSize: 24, lineHeight: 1.45, opacity: 0.9, maxWidth: 460, margin: '0 0 48px' }}>
            Amenity deck with fire tables and dining. Twenty-five private slips. A wood-fired sauna on the water.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
            {[
              ['Firepits', 'Two, dockside'],
              ['Sauna', 'Wood-fired'],
              ['Kayak', 'Shared launch'],
              ['Trail', 'Direct M22'],
            ].map(([a, b]) => (
              <div key={a} style={{ borderTop: `1px solid rgba(234,228,213,0.3)`, paddingTop: 16 }}>
                <div style={{ fontFamily: V3_FONT_DISPLAY, fontWeight: 500, fontSize: 20 }}>{a}</div>
                <div style={{ fontFamily: V3_FONT_MONO, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', opacity: 0.7, marginTop: 6 }}>{b}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ position: 'relative', overflow: 'hidden', minHeight: 700 }}>
          <img src={IMG.dockSunset} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
      </div>
    </section>
  );
}

function V3Lifestyle({ onOpenLightbox }) {
  const items = [
    { src: IMG.elevLake, label: 'Frankfort Beach', time: '6 min' },
    { src: IMG.trailSunset, label: 'M22 Trail', time: 'On-site' },
    { src: IMG.dockMorning, label: 'Downtown', time: '10 min bike' },
    { src: IMG.aerialBayC, label: 'Charter fishing', time: 'At dock' },
    { src: IMG.elevTrail, label: 'Platte River', time: '12 min' },
    { src: IMG.aerialBackC, label: 'Sleeping Bear', time: '22 min' },
  ];
  return (
    <section id="neighborhood" style={{ background: V3_PAL.bg, color: V3_PAL.ink, padding: '180px 80px' }}>
      <div style={{ textAlign: 'center', marginBottom: 72 }}>
        <div style={{ fontFamily: V3_FONT_MONO, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: V3_PAL.muted, marginBottom: 24 }}>№ 06 &nbsp; Neighborhood</div>
        <h2 style={{ fontFamily: V3_FONT_DISPLAY, fontWeight: 300, fontSize: 88, letterSpacing: -3, lineHeight: 1, margin: 0 }}>
          A Frankfort <span style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontWeight: 400, color: V3_PAL.accent }}>summer</span>, at reach.
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {items.map((g, i) => (
          <div key={i} onClick={() => onOpenLightbox(i % GALLERY.length)} style={{ cursor: 'pointer' }}>
            <div style={{ aspectRatio: '4/5', overflow: 'hidden', marginBottom: 16 }}>
              <img src={g.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <div style={{ fontFamily: V3_FONT_DISPLAY, fontSize: 18, fontWeight: 500 }}>{g.label}</div>
              <div style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontSize: 16, color: V3_PAL.muted }}>{g.time}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function V3Contact({ onReserve }) {
  return (
    <section id="contact" style={{ background: V3_PAL.bgAlt, color: V3_PAL.ink, padding: '180px 80px' }}>
      <div style={{ maxWidth: 1080, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ fontFamily: V3_FONT_MONO, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: V3_PAL.muted, marginBottom: 24 }}>№ 07 &nbsp; Visit</div>
        <h2 style={{ fontFamily: V3_FONT_DISPLAY, fontWeight: 300, fontSize: 128, letterSpacing: -4.5, lineHeight: 0.92, margin: '0 0 40px' }}>
          See it <span style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontWeight: 400, color: V3_PAL.accent }}>in May.</span>
        </h2>
        <p style={{ fontFamily: V3_FONT_SERIF, fontStyle: 'italic', fontSize: 26, lineHeight: 1.45, color: V3_PAL.inkSoft, maxWidth: 580, margin: '0 auto 56px' }}>
          Model residences open Memorial Day weekend. Private walkthroughs by appointment from May 23.
        </p>
        <button onClick={onReserve} style={{ padding: '20px 40px', background: V3_PAL.ink, color: V3_PAL.bg, border: 'none', fontFamily: V3_FONT_DISPLAY, fontSize: 14, letterSpacing: 0.5, cursor: 'pointer', borderRadius: 999 }}>Reserve a private visit →</button>

        <div style={{ marginTop: 96, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40, borderTop: `1px solid ${V3_PAL.line}`, paddingTop: 40, textAlign: 'left' }}>
          {[
            ['Sales Office', '412 Main Street\nFrankfort, MI 49635'],
            ['Contact', 'hello@duneridge.co\n(231) 555-0142'],
            ['Follow', '@duneridge.co on Instagram'],
          ].map(([l, v]) => (
            <div key={l}>
              <div style={{ fontFamily: V3_FONT_MONO, fontSize: 10, letterSpacing: 2.5, textTransform: 'uppercase', color: V3_PAL.muted, marginBottom: 10 }}>{l}</div>
              <div style={{ fontFamily: V3_FONT_SERIF, fontSize: 20, whiteSpace: 'pre-line', lineHeight: 1.4 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function V3Footer() {
  return (
    <footer style={{ background: V3_PAL.ink, color: V3_PAL.bg, padding: '60px 80px 36px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 28, borderBottom: `1px solid ${V3_PAL.inkSoft}`, marginBottom: 24 }}>
        <V3Wordmark color={V3_PAL.bg} size={16} />
        <div style={{ display: 'flex', gap: 28, fontFamily: V3_FONT_DISPLAY, fontSize: 12, opacity: 0.8 }}>
          <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Instagram ↗</a>
          <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Brochure ↓</a>
          <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Press kit</a>
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: V3_FONT_MONO, fontSize: 10, letterSpacing: 2, opacity: 0.5, textTransform: 'uppercase' }}>
        <span>© 2026 Dune Ridge LLC · Frankfort, MI</span>
        <span>Architecture · Northwood Studio</span>
        <span>Developer · Ridge & Bay Group</span>
      </div>
    </footer>
  );
}

function SiteV3() {
  const [resOpen, setResOpen] = React.useState(false);
  const lb = useLightbox(GALLERY);
  return (
    <div data-site-root="v3" style={{ background: V3_PAL.bg, color: V3_PAL.ink, fontFamily: V3_FONT_DISPLAY, width: '100%', maxWidth: '100%', overflow: 'hidden' }}>
      <V3Hero onReserve={() => setResOpen(true)} />
      <V3Overview />
      <V3ParallaxStrip />
      <V3Residences />
      <V3Tour />
      <V3Site />
      <V3Amenities />
      <V3Lifestyle onOpenLightbox={lb.open} />
      <V3Contact onReserve={() => setResOpen(true)} />
      <V3Footer />
      <ReservationModal open={resOpen} onClose={() => setResOpen(false)} palette={V3_PAL} accentLabel="Dune Ridge" />
      {lb.node}
    </div>
  );
}

Object.assign(window, { SiteV3, V3_PAL });