// V1 — Editorial Warmth. Newsreader serif + Mona Sans body.
// Palette: warm oat background, charred cedar ink, sand accents, lake stone.

const V1_PAL = {
  bg: '#f1ebdf',        // warm oat
  bgAlt: '#e6dcc8',     // deeper oat
  ink: '#1f1b15',       // near-black charred cedar
  inkSoft: '#3d3629',
  muted: '#7a6f5b',
  line: '#d4c8ae',
  accent: '#8b5e34',    // warm cedar brown
  water: '#c9d4d6',
  sand: '#e8dcc0',
  card: '#faf5ea',
};

const V1_FONT_DISPLAY = "'Newsreader', Georgia, serif";
const V1_FONT_BODY = "'Mona Sans', system-ui, sans-serif";
const V1_FONT_MONO = "'Geist Mono', ui-monospace, monospace";

function V1Wordmark({ size = 22, color }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, color: color || V1_PAL.ink, fontFamily: V1_FONT_DISPLAY, fontSize: size, fontWeight: 400, letterSpacing: -0.5, fontStyle: 'italic' }}>
      <span style={{ fontStyle: 'normal', fontFamily: V1_FONT_MONO, fontSize: size * 0.45, letterSpacing: 3, textTransform: 'uppercase', fontStyle: 'normal' }}>DR</span>
      <span style={{ width: 1, height: size * 0.7, background: color || V1_PAL.ink, opacity: 0.3 }} />
      <span>Dune Ridge</span>
    </div>
  );
}

function V1Nav({ onReserve }) {
  const links = ['Residences', 'Site', 'Amenities', 'Neighborhood', 'Contact'];
  return (
    <nav style={{ position: 'absolute', top: 0, left: 0, right: 0, padding: '32px 72px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 10, color: V1_PAL.ink }}>
      <V1Wordmark />
      <div style={{ display: 'flex', gap: 40, fontFamily: V1_FONT_BODY, fontSize: 14, color: V1_PAL.ink }}>
        {links.map((l) => (
          <a key={l} href={`#${l.toLowerCase()}`} style={{ color: 'inherit', textDecoration: 'none' }}>{l}</a>
        ))}
      </div>
      <button onClick={onReserve} style={{ padding: '10px 20px', background: V1_PAL.ink, color: V1_PAL.bg, border: 'none', fontFamily: V1_FONT_MONO, fontSize: 11, letterSpacing: 2.5, textTransform: 'uppercase', cursor: 'pointer', borderRadius: 0 }}>Reserve a visit</button>
    </nav>
  );
}

function V1Hero({ onReserve }) {
  const [timeIdx, setTimeIdx] = React.useState(2); // default sunset
  const time = HERO_TIMES[timeIdx];
  return (
    <section style={{ position: 'relative', minHeight: 920, background: V1_PAL.bg, display: 'grid', gridTemplateColumns: '1fr 1.15fr', color: V1_PAL.ink }}>
      <V1Nav onReserve={onReserve} />
      {/* Left — typographic statement */}
      <div style={{ padding: '180px 72px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontFamily: V1_FONT_MONO, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: V1_PAL.muted, marginBottom: 36 }}>
            Frankfort, Michigan &nbsp;·&nbsp; Betsy Lake
          </div>
          <h1 style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 108, lineHeight: 0.96, letterSpacing: -3.5, margin: '0 0 36px', color: V1_PAL.ink }}>
            A quieter<br />
            <span style={{ fontStyle: 'italic', fontWeight: 300 }}>shoreline,</span><br />
            by design.
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: V1_PAL.inkSoft, maxWidth: 460, margin: 0 }}>
            Thirty Scandinavian-inspired residences on a wooded ridge above Betsy Lake. Released in three phases — The Ridge, now available; The Bay, to follow; and twelve Waterfront residences, already reserved.
          </p>
        </div>
        <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginTop: 64 }}>
          <button onClick={onReserve} style={{ padding: '18px 36px', background: V1_PAL.ink, color: V1_PAL.bg, border: 'none', fontFamily: V1_FONT_MONO, fontSize: 12, letterSpacing: 3, textTransform: 'uppercase', cursor: 'pointer', borderRadius: 0 }}>Reserve a visit →</button>
          <a href="#residences" style={{ padding: '18px 0 18px 12px', color: V1_PAL.ink, fontFamily: V1_FONT_MONO, fontSize: 12, letterSpacing: 3, textTransform: 'uppercase', textDecoration: 'none' }}>View residences</a>
        </div>
      </div>
      {/* Right — rendering with time switcher */}
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        {HERO_TIMES.map((t, i) => (
          <img key={t.key} src={t.src} alt={t.caption} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: i === timeIdx ? 1 : 0, transition: 'opacity 900ms ease' }} />
        ))}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(241,235,223,0.3) 0%, transparent 20%)' }} />
        {/* Time caption */}
        <div style={{ position: 'absolute', left: 40, bottom: 40, color: '#fff', fontFamily: V1_FONT_MONO, fontSize: 11, letterSpacing: 2.5, textTransform: 'uppercase', mixBlendMode: 'difference' }}>
          <div style={{ opacity: 0.6, marginBottom: 6 }}>View</div>
          <div>{time.caption}</div>
        </div>
        {/* Time toggle */}
        <div style={{ position: 'absolute', right: 40, bottom: 40, display: 'flex', gap: 6, background: 'rgba(241,235,223,0.92)', padding: 6, backdropFilter: 'blur(8px)' }}>
          {HERO_TIMES.map((t, i) => (
            <button key={t.key} onClick={() => setTimeIdx(i)} style={{ padding: '10px 16px', background: i === timeIdx ? V1_PAL.ink : 'transparent', color: i === timeIdx ? V1_PAL.bg : V1_PAL.ink, border: 'none', fontFamily: V1_FONT_MONO, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', cursor: 'pointer', borderRadius: 0 }}>{t.label}</button>
          ))}
        </div>
      </div>
    </section>
  );
}

function V1Overview() {
  return (
    <section style={{ background: V1_PAL.bg, color: V1_PAL.ink, padding: '140px 72px', display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 96 }}>
      <div>
        <div style={{ fontFamily: V1_FONT_MONO, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: V1_PAL.muted, marginBottom: 20 }}>01 · The Project</div>
        <div style={{ fontFamily: V1_FONT_DISPLAY, fontStyle: 'italic', fontSize: 32, lineHeight: 1.1, color: V1_PAL.inkSoft, fontWeight: 300 }}>An honest exterior, a generous interior.</div>
      </div>
      <div>
        <p style={{ fontFamily: V1_FONT_DISPLAY, fontSize: 34, lineHeight: 1.25, fontWeight: 300, margin: '0 0 40px', letterSpacing: -0.5, maxWidth: 820, textWrap: 'balance' }}>
          Dune Ridge is a thirty-two-unit lakeside development shaped by the lines of Great Lakes boathouses and the restraint of Nordic design — dark cedar, warm white, black gables, and windows sized for light, not for show.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 48, marginTop: 56, paddingTop: 40, borderTop: `1px solid ${V1_PAL.line}` }}>
          <Stat n={30} label="Residences" C={V1_PAL} />
          <Stat n={3} label="Buildings" C={V1_PAL} />
          <Stat n={25} label="Boat slips" C={V1_PAL} />
          <Stat n={12} suffix=" / 12" label="Waterfront reserved" C={V1_PAL} />
        </div>
        <div style={{ display: 'flex', gap: 48, marginTop: 40, fontFamily: V1_FONT_MONO, fontSize: 12, letterSpacing: 2, textTransform: 'uppercase', color: V1_PAL.muted }}>
          <span>Construction · Fall 2025</span>
          <span>Preview · Memorial Day</span>
          <span>Delivery · 2027</span>
        </div>
      </div>
    </section>
  );
}

function Stat({ n, pre = '', suffix = '', label, C }) {
  return (
    <div>
      <div style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 68, letterSpacing: -2, lineHeight: 1, color: C.ink }}>
        <CountUp to={n} prefix={pre} suffix={suffix} />
      </div>
      <div style={{ fontFamily: V1_FONT_MONO, fontSize: 10, letterSpacing: 2.5, textTransform: 'uppercase', color: C.muted, marginTop: 12 }}>{label}</div>
    </div>
  );
}

function V1Residences({ onOpenLightbox }) {
  const [mode, setMode] = React.useState('2D');
  const plans = [
    { name: 'The Ridge · 2BR walkout', sqft: '1,200', beds: 2, baths: 2, price: 'From the low $900s', desc: 'Two bedrooms, open kitchen-living with west-facing balcony over Lake Michigan. Lower-level units step out onto a private stone terrace.' },
    { name: 'The Ridge · 4BR combined', sqft: '2,400', beds: 4, baths: 3, price: 'From $1.65m', desc: 'Two adjoining residences combined into a single four-bedroom. Two balconies, vaulted top-floor ceilings, double-island kitchen.' },
  ];
  return (
    <section id="residences" style={{ background: V1_PAL.card, color: V1_PAL.ink, padding: '140px 72px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 36 }}>
        <div>
          <div style={{ fontFamily: V1_FONT_MONO, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: V1_PAL.muted, marginBottom: 20 }}>02 · The Ridge</div>
          <h2 style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 88, letterSpacing: -2, lineHeight: 1, margin: 0 }}>Six residences,<br /><span style={{ fontStyle: 'italic' }}>on the bluff.</span></h2>
        </div>
        <div style={{ fontFamily: V1_FONT_DISPLAY, fontStyle: 'italic', fontSize: 22, lineHeight: 1.3, color: V1_PAL.inkSoft, fontWeight: 300, maxWidth: 420 }}>
          The Ridge sits highest on the site — walkout lower levels, vaulted top-floor ceilings, and the best views of Lake Michigan at sunset. Four of six are reserved; final pricing locks March 15.
        </div>
      </div>
      {/* 2D / 3D toggle */}
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 24 }}>
        <div style={{ display: 'inline-flex', gap: 4, background: V1_PAL.bg, border: `1px solid ${V1_PAL.line}`, padding: 4 }}>
          {['2D', '3D'].map((m) => (
            <button key={m} onClick={() => setMode(m)} style={{ padding: '10px 20px', background: mode === m ? V1_PAL.ink : 'transparent', color: mode === m ? V1_PAL.bg : V1_PAL.ink, border: 'none', fontFamily: V1_FONT_MONO, fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', cursor: 'pointer', borderRadius: 0 }}>{m === '2D' ? 'Plan · 2D' : 'Isometric · 3D'}</button>
          ))}
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, marginBottom: 80 }}>
        {plans.map((p, i) => (
          <div key={p.name} style={{ background: V1_PAL.bg, padding: 40, border: `1px solid ${V1_PAL.line}` }}>
            {/* Schematic floor plan — 2D / 3D toggle */}
            <div style={{ aspectRatio: '1.4', background: V1_PAL.bgAlt, marginBottom: 32, position: 'relative', border: `1px solid ${V1_PAL.line}` }}>
              <FloorPlan2D3D variant={i} C={V1_PAL} mode={mode} />
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
              <h3 style={{ fontFamily: V1_FONT_DISPLAY, fontSize: 36, fontWeight: 400, letterSpacing: -0.8, margin: 0 }}>{p.name}</h3>
              <span style={{ fontFamily: V1_FONT_MONO, fontSize: 11, letterSpacing: 2, color: V1_PAL.muted, textTransform: 'uppercase' }}>{p.price}</span>
            </div>
            <div style={{ display: 'flex', gap: 20, fontFamily: V1_FONT_MONO, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: V1_PAL.muted, margin: '16px 0 20px' }}>
              <span>{p.sqft} sqft</span>
              <span>·</span>
              <span>{p.beds} bed</span>
              <span>·</span>
              <span>{p.baths} bath</span>
            </div>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: V1_PAL.inkSoft, margin: '0 0 28px' }}>{p.desc}</p>
            <div style={{ display: 'flex', gap: 12 }}>
              <a href="#" style={{ padding: '12px 20px', background: V1_PAL.ink, color: V1_PAL.bg, textDecoration: 'none', fontFamily: V1_FONT_MONO, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase' }}>Download PDF ↓</a>
              <a href="#" style={{ padding: '12px 20px', border: `1px solid ${V1_PAL.ink}`, color: V1_PAL.ink, textDecoration: 'none', fontFamily: V1_FONT_MONO, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase' }}>Interactive tour</a>
            </div>
          </div>
        ))}
      </div>

      {/* Features list */}
      <div style={{ borderTop: `1px solid ${V1_PAL.line}`, paddingTop: 48, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
        {[
          ['9-ft', 'Ceilings'],
          ['White oak', 'Wide-plank floors'],
          ['Quartz', 'Kitchen islands'],
          ['Black-framed', 'Gable windows'],
          ['Cedar', 'Balconies'],
          ['Heat-pump', 'Climate'],
          ['EV-ready', 'Parking'],
          ['Private', 'Storage'],
        ].map(([a, b]) => (
          <div key={b}>
            <div style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 26, letterSpacing: -0.5 }}>{a}</div>
            <div style={{ fontFamily: V1_FONT_MONO, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: V1_PAL.muted, marginTop: 6 }}>{b}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// Simple schematic floor plan
function FloorPlan({ variant, C }) {
  if (variant === 0) {
    return (
      <svg viewBox="0 0 400 280" style={{ width: '100%', height: '100%' }}>
        <rect x="20" y="20" width="360" height="240" fill="none" stroke={C.ink} strokeWidth="1.5" />
        {/* living/kitchen */}
        <rect x="20" y="20" width="220" height="160" fill="none" stroke={C.ink} strokeWidth="0.5" />
        <text x="40" y="50" fontFamily={V1_FONT_MONO} fontSize="9" letterSpacing="1.5" fill={C.muted}>LIVING · KITCHEN</text>
        {/* island */}
        <rect x="140" y="100" width="70" height="18" fill={C.ink} opacity="0.15" />
        {/* bed 1 */}
        <rect x="240" y="20" width="140" height="100" fill="none" stroke={C.ink} strokeWidth="0.5" />
        <text x="258" y="50" fontFamily={V1_FONT_MONO} fontSize="9" letterSpacing="1.5" fill={C.muted}>BEDROOM 1</text>
        {/* bed 2 */}
        <rect x="240" y="120" width="140" height="80" fill="none" stroke={C.ink} strokeWidth="0.5" />
        <text x="258" y="148" fontFamily={V1_FONT_MONO} fontSize="9" letterSpacing="1.5" fill={C.muted}>BEDROOM 2</text>
        {/* bath */}
        <rect x="20" y="180" width="220" height="80" fill="none" stroke={C.ink} strokeWidth="0.5" />
        <text x="40" y="208" fontFamily={V1_FONT_MONO} fontSize="9" letterSpacing="1.5" fill={C.muted}>BATH · UTILITY</text>
        <rect x="160" y="200" width="80" height="60" fill={C.ink} opacity="0.08" />
        {/* balcony */}
        <rect x="240" y="200" width="140" height="60" fill={C.ink} opacity="0.05" stroke={C.ink} strokeWidth="0.3" strokeDasharray="2 2" />
        <text x="260" y="236" fontFamily={V1_FONT_MONO} fontSize="9" letterSpacing="1.5" fill={C.muted}>BALCONY ↓ LAKE</text>
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 400 280" style={{ width: '100%', height: '100%' }}>
      <rect x="10" y="20" width="380" height="240" fill="none" stroke={C.ink} strokeWidth="1.5" />
      <line x1="200" y1="20" x2="200" y2="260" stroke={C.ink} strokeWidth="0.5" strokeDasharray="3 3" />
      {/* two units mirrored */}
      <g>
        <rect x="10" y="20" width="190" height="140" fill="none" stroke={C.ink} strokeWidth="0.5" />
        <text x="24" y="46" fontFamily={V1_FONT_MONO} fontSize="8" letterSpacing="1.5" fill={C.muted}>GREAT ROOM A</text>
        <rect x="80" y="90" width="60" height="14" fill={C.ink} opacity="0.15" />
        <rect x="10" y="160" width="95" height="100" fill="none" stroke={C.ink} strokeWidth="0.5" />
        <text x="22" y="184" fontFamily={V1_FONT_MONO} fontSize="8" letterSpacing="1.5" fill={C.muted}>BED 1</text>
        <rect x="105" y="160" width="95" height="100" fill="none" stroke={C.ink} strokeWidth="0.5" />
        <text x="117" y="184" fontFamily={V1_FONT_MONO} fontSize="8" letterSpacing="1.5" fill={C.muted}>BED 2</text>
      </g>
      <g transform="translate(400 0) scale(-1 1)">
        <rect x="10" y="20" width="190" height="140" fill="none" stroke={C.ink} strokeWidth="0.5" />
        <rect x="80" y="90" width="60" height="14" fill={C.ink} opacity="0.15" />
        <rect x="10" y="160" width="95" height="100" fill="none" stroke={C.ink} strokeWidth="0.5" />
        <rect x="105" y="160" width="95" height="100" fill="none" stroke={C.ink} strokeWidth="0.5" />
      </g>
      <text x="214" y="46" fontFamily={V1_FONT_MONO} fontSize="8" letterSpacing="1.5" fill={C.muted}>GREAT ROOM B</text>
      <text x="214" y="184" fontFamily={V1_FONT_MONO} fontSize="8" letterSpacing="1.5" fill={C.muted}>BED 3</text>
      <text x="310" y="184" fontFamily={V1_FONT_MONO} fontSize="8" letterSpacing="1.5" fill={C.muted}>BED 4</text>
      {/* connection */}
      <rect x="180" y="120" width="40" height="30" fill={V1_PAL.accent} opacity="0.15" />
      <text x="200" y="140" textAnchor="middle" fontFamily={V1_FONT_MONO} fontSize="7" letterSpacing="1" fill={C.accent}>LINK</text>
    </svg>
  );
}

function V1Site() {
  return (
    <section id="site" style={{ background: V1_PAL.bg, color: V1_PAL.ink, padding: '140px 72px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 64 }}>
        <div>
          <div style={{ fontFamily: V1_FONT_MONO, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: V1_PAL.muted, marginBottom: 20 }}>03 · Site</div>
          <h2 style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 88, letterSpacing: -2, lineHeight: 1, margin: 0 }}>Three buildings,<br /><span style={{ fontStyle: 'italic' }}>stepped up the hill.</span></h2>
        </div>
        <div style={{ fontFamily: V1_FONT_DISPLAY, fontStyle: 'italic', fontSize: 20, lineHeight: 1.3, color: V1_PAL.inkSoft, fontWeight: 300, maxWidth: 360 }}>The Ridge at the top, The Bay mid-slope, and the Waterfront on the lake. Each building released as a phase — each floor plan tuned to its elevation.</div>
      </div>
      <PhaseBar palette={V1_PAL} displayFont={V1_FONT_DISPLAY} monoFont={V1_FONT_MONO} />
      <div style={{ height: 56 }} />
      <SitePlan palette={V1_PAL} />
    </section>
  );
}

function V1Amenities() {
  return (
    <section id="amenities" style={{ background: V1_PAL.ink, color: V1_PAL.bg, padding: 0 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 700 }}>
        <div style={{ position: 'relative', overflow: 'hidden' }}>
          <img src={IMG.dockSunset} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
        <div style={{ padding: '100px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{ fontFamily: V1_FONT_MONO, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: V1_PAL.bgAlt, marginBottom: 20 }}>04 · Shared Spaces</div>
          <h2 style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 64, letterSpacing: -1.5, lineHeight: 1.05, margin: '0 0 28px' }}>The dock<br /><span style={{ fontStyle: 'italic' }}>is the living room.</span></h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, opacity: 0.85, maxWidth: 440, margin: '0 0 36px' }}>A shared amenity deck with firepit, dining, grilling stations, and a boardwalk to the water. Twenty-five private boat slips are available as a homeowner add-on.</p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, borderTop: `1px solid ${V1_PAL.inkSoft}`, paddingTop: 32 }}>
            {[
              ['Waterfront', 'Dock · firepit · sauna'],
              ['Wellness', 'Yoga lawn · trailhead'],
              ['Storage', 'Kayak · paddle · bike'],
              ['Access', '24/7 keyless'],
            ].map(([a, b]) => (
              <div key={a}>
                <div style={{ fontFamily: V1_FONT_DISPLAY, fontSize: 22, fontWeight: 400, fontStyle: 'italic' }}>{a}</div>
                <div style={{ fontFamily: V1_FONT_MONO, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: V1_PAL.bgAlt, marginTop: 6 }}>{b}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function V1Lifestyle({ onOpenLightbox }) {
  return (
    <section id="neighborhood" style={{ background: V1_PAL.bg, color: V1_PAL.ink, padding: '140px 72px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 56 }}>
        <div>
          <div style={{ fontFamily: V1_FONT_MONO, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: V1_PAL.muted, marginBottom: 20 }}>05 · Neighborhood</div>
          <h2 style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 88, letterSpacing: -2, lineHeight: 1, margin: 0 }}>A Frankfort<br /><span style={{ fontStyle: 'italic' }}>summer,</span> in reach.</h2>
        </div>
        <div style={{ fontFamily: V1_FONT_DISPLAY, fontStyle: 'italic', fontSize: 20, lineHeight: 1.3, color: V1_PAL.inkSoft, fontWeight: 300, maxWidth: 340 }}>Ten minutes by bike to downtown. Sandy beaches, charter fishing, the M22 trail, and Lake Michigan sunsets — all within a short walk.</div>
      </div>

      {/* Grid — masonry-like via CSS grid with tall/wide cells */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gridAutoRows: '180px', gap: 16 }}>
        {[
          { src: IMG.aerialBayC, span: 'grid-column: span 8; grid-row: span 2', label: 'Downtown · 8 min' },
          { src: IMG.trailSunset, span: 'grid-column: span 4; grid-row: span 2', label: 'M22 Trail · on-site' },
          { src: IMG.dockMorning, span: 'grid-column: span 4; grid-row: span 2', label: 'Charter marina' },
          { src: IMG.elevLake, span: 'grid-column: span 5; grid-row: span 2', label: 'Frankfort Beach · 6 min' },
          { src: IMG.dockBSunset, span: 'grid-column: span 3; grid-row: span 2', label: 'Point Betsie lighthouse' },
          { src: IMG.aerialBackC, span: 'grid-column: span 6; grid-row: span 2', label: 'Platte River kayaking' },
          { src: IMG.trailNoon, span: 'grid-column: span 6; grid-row: span 2', label: 'Sleeping Bear · 22 min' },
        ].map((g, i) => (
          <div key={i} style={{ cssFloat: undefined, ...parseSpan(g.span), position: 'relative', overflow: 'hidden', cursor: 'pointer' }} onClick={() => onOpenLightbox(i % GALLERY.length)}>
            <img src={g.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 600ms' }} />
            <div style={{ position: 'absolute', left: 16, bottom: 16, color: '#fff', fontFamily: V1_FONT_MONO, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', textShadow: '0 1px 8px rgba(0,0,0,0.6)' }}>
              <span style={{ background: V1_PAL.ink, padding: '6px 10px' }}>{g.label}</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function parseSpan(s) {
  const obj = {};
  s.split(';').forEach((rule) => {
    const [k, v] = rule.split(':').map((x) => x && x.trim());
    if (!k || !v) return;
    const cam = k.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
    obj[cam] = v;
  });
  return obj;
}

function V1Flyover() {
  return (
    <section style={{ background: V1_PAL.ink, color: V1_PAL.bg, padding: '120px 72px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div style={{ fontFamily: V1_FONT_MONO, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: V1_PAL.bgAlt, opacity: 0.7, marginBottom: 20 }}>Interactive tour · 360°</div>
          <h2 style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 68, letterSpacing: -1.8, lineHeight: 1.02, margin: '0 0 28px' }}>
            The view is sixty feet up.<br /><span style={{ fontStyle: 'italic' }}>Come see it anyway.</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, opacity: 0.85, maxWidth: 440, margin: 0 }}>
            A preliminary 360° rendering of a Ridge unit. Drag to look around the great room, step out to the balcony, follow the path down to the dock.
          </p>
        </div>
        <div style={{ aspectRatio: '16/9', width: '100%' }}>
          <VirtualTour palette={V1_PAL} label="Ridge unit · Interactive 360° walkthrough" caption="Preliminary rendering" />
        </div>
      </div>
    </section>
  );
}

function V1Contact({ onReserve }) {
  return (
    <section id="contact" style={{ background: V1_PAL.bgAlt, color: V1_PAL.ink, padding: '140px 72px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 96, alignItems: 'start' }}>
        <div>
          <div style={{ fontFamily: V1_FONT_MONO, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: V1_PAL.muted, marginBottom: 20 }}>06 · Visit</div>
          <h2 style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 96, letterSpacing: -2.5, lineHeight: 0.98, margin: '0 0 40px' }}>See it<br /><span style={{ fontStyle: 'italic' }}>in May.</span></h2>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: V1_PAL.inkSoft, maxWidth: 480, margin: '0 0 48px' }}>Model residences open Memorial Day weekend. Private walkthroughs available by appointment from May 23.</p>

          <div style={{ borderTop: `1px solid ${V1_PAL.line}`, paddingTop: 32, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
            <div>
              <div style={{ fontFamily: V1_FONT_MONO, fontSize: 10, letterSpacing: 2.5, textTransform: 'uppercase', color: V1_PAL.muted, marginBottom: 8 }}>Sales Office</div>
              <div style={{ fontSize: 15, lineHeight: 1.5 }}>412 Main Street<br />Frankfort, MI 49635</div>
            </div>
            <div>
              <div style={{ fontFamily: V1_FONT_MONO, fontSize: 10, letterSpacing: 2.5, textTransform: 'uppercase', color: V1_PAL.muted, marginBottom: 8 }}>Contact</div>
              <div style={{ fontSize: 15, lineHeight: 1.5 }}>hello@duneridge.co<br />(231) 555-0142</div>
            </div>
          </div>
        </div>

        <div>
          <BrokerCard palette={V1_PAL} displayFont={V1_FONT_DISPLAY} bodyFont={V1_FONT_BODY} monoFont={V1_FONT_MONO} style={{ marginBottom: 24 }} />
        <form onSubmit={(e) => { e.preventDefault(); onReserve(); }} style={{ background: V1_PAL.bg, padding: 40, border: `1px solid ${V1_PAL.line}` }}>
          <div style={{ fontFamily: V1_FONT_DISPLAY, fontStyle: 'italic', fontSize: 26, marginBottom: 10, fontWeight: 400 }}>Request information</div>
          <div style={{ fontFamily: V1_FONT_MONO, fontSize: 10, letterSpacing: 2, color: V1_PAL.muted, textTransform: 'uppercase', marginBottom: 24 }}>Routed directly to {firstNameOf(useBroker().name)} — no inbox abyss.</div>
          <div style={{ display: 'grid', gap: 20 }}>
            <Field label="Full name" value="" onChange={() => {}} C={V1_PAL} />
            <Field label="Email" value="" onChange={() => {}} C={V1_PAL} />
            <Field label="Phone" value="" onChange={() => {}} C={V1_PAL} />
            <div>
              <div style={{ fontFamily: V1_FONT_MONO, fontSize: 10, letterSpacing: 2, color: V1_PAL.muted, textTransform: 'uppercase', marginBottom: 6 }}>Message</div>
              <textarea rows="3" style={{ width: '100%', background: 'transparent', border: 'none', borderBottom: `1px solid ${V1_PAL.line}`, padding: '10px 0', color: V1_PAL.ink, fontSize: 15, outline: 'none', fontFamily: V1_FONT_BODY, resize: 'none' }} />
            </div>
          </div>
          <button type="submit" style={{ marginTop: 32, width: '100%', padding: 18, background: V1_PAL.ink, color: V1_PAL.bg, border: 'none', fontFamily: V1_FONT_MONO, fontSize: 12, letterSpacing: 3, textTransform: 'uppercase', cursor: 'pointer', borderRadius: 0 }}>Send inquiry →</button>
        </form>
        </div>
      </div>
    </section>
  );
}

function V1Footer() {
  return (
    <footer style={{ background: V1_PAL.ink, color: V1_PAL.bg, padding: '64px 72px 40px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40, paddingBottom: 32, borderBottom: `1px solid ${V1_PAL.inkSoft}` }}>
        <V1Wordmark color={V1_PAL.bg} size={28} />
        <div style={{ display: 'flex', gap: 32, fontFamily: V1_FONT_MONO, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', opacity: 0.8 }}>
          <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Instagram ↗</a>
          <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Press ↗</a>
          <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Brochure ↓</a>
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: V1_FONT_MONO, fontSize: 10, letterSpacing: 2, opacity: 0.5, textTransform: 'uppercase' }}>
        <span>© 2026 Dune Ridge LLC · Frankfort, Michigan</span>
        <span>Architecture · Northwood Studio</span>
        <span>Developer · Ridge & Bay Group</span>
      </div>
    </footer>
  );
}

function SiteV1() {
  const [resOpen, setResOpen] = React.useState(false);
  const lb = useLightbox(GALLERY);
  return (
    <div data-site-root="v1" style={{ background: V1_PAL.bg, color: V1_PAL.ink, fontFamily: V1_FONT_BODY, width: '100%', maxWidth: '100%', overflow: 'hidden' }}>
      <V1Hero onReserve={() => setResOpen(true)} />
      <V1Overview />
      <V1Residences onOpenLightbox={lb.open} />
      <V1Flyover />
      <V1Site />
      <V1Amenities />
      <V1Lifestyle onOpenLightbox={lb.open} />
      <V1Contact onReserve={() => setResOpen(true)} />
      <V1Footer />
      <ReservationModal open={resOpen} onClose={() => setResOpen(false)} palette={V1_PAL} accentLabel="Dune Ridge" />
      {lb.node}
    </div>
  );
}

Object.assign(window, { SiteV1, V1_PAL });