// 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 = 320, onDark = false }) {
  return <LogoMark height={size} mode={onDark ? 'dark' : 'light'} />;
}

function V1Nav() {
  const links = [
  { label: 'Residences', href: '#residences' },
  { label: 'Interiors', href: '#interiors' },
  { label: 'Site Plan', href: '#site' },
  { label: 'Amenities', href: '#amenities' },
  { label: 'Frankfort', href: '#neighborhood' }];

  return (
    <nav className="v1-nav" style={{ background: V1_PAL.bg, borderBottom: `1px solid ${V1_PAL.line}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 28, padding: '18px 48px', flexWrap: 'wrap' }}>
      <style>{`
        @media (max-width: 1040px) {
          .v1-nav { justify-content: center !important; }
          .v1-nav-links { width: 100%; justify-content: center !important; }
        }
      `}</style>
      <a href="#" style={{ display: 'block', textDecoration: 'none', color: 'inherit' }}>
        <LogoMark height={156} />
      </a>
      <div className="v1-nav-links" style={{ display: 'flex', alignItems: 'center', gap: 28, fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 1, textTransform: 'uppercase', color: V1_PAL.ink, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
        {links.map((l) =>
        <a key={l.label} href={l.href} style={{ color: 'inherit', textDecoration: 'none', whiteSpace: 'nowrap', paddingBottom: 3, borderBottom: '1px solid transparent', transition: 'border-color 200ms' }} onMouseEnter={(e) => e.currentTarget.style.borderBottomColor = V1_PAL.ink} onMouseLeave={(e) => e.currentTarget.style.borderBottomColor = 'transparent'}>{l.label}</a>
        )}
        <a href="#contact" style={{ padding: '13px 26px', background: V1_PAL.ink, color: V1_PAL.bg, textDecoration: 'none', whiteSpace: 'nowrap' }}>Contact</a>
      </div>
    </nav>);

}

function V1HeroVideo() {
  const [playing, setPlaying] = React.useState(false);
  return (
    <div style={{ position: 'relative', overflow: 'hidden', background: V1_PAL.ink, width: '100%', height: '100%' }}>
      {playing ?
      <iframe
        title="Dune Ridge at Betsie Bay"
        src="https://www.youtube.com/embed/hKN72zDuHu4?autoplay=1&rel=0&modestbranding=1&playsinline=1"
        allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
        allowFullScreen
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 'none' }} /> :

      <>
        <img src={IMG.int2brBalcony} alt="Sunset over Betsie Bay from a Dune Ridge balcony" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(241,235,223,0.45) 0%, rgba(31,27,21,0.06) 28%, rgba(31,27,21,0.30) 100%)' }} />
        <button onClick={() => setPlaying(true)} aria-label="Play film" style={{ position: 'absolute', inset: 0, margin: 'auto', width: 96, height: 96, borderRadius: '50%', border: '1px solid rgba(245,240,230,0.85)', background: 'rgba(31,27,21,0.32)', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)', color: '#f5f0e6', cursor: 'pointer', display: 'grid', placeItems: 'center', transition: 'background 200ms, transform 200ms' }} onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(31,27,21,0.55)'; e.currentTarget.style.transform = 'scale(1.06)'; }} onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(31,27,21,0.32)'; e.currentTarget.style.transform = 'scale(1)'; }}>
          <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor" style={{ marginLeft: 3 }}><path d="M8 5v14l11-7z" /></svg>
        </button>
        <div style={{ position: 'absolute', bottom: 28, left: 28, color: '#f5f0e6', fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 2, textTransform: 'uppercase', textShadow: '0 1px 10px rgba(0,0,0,0.55)' }}>Watch the film</div>
      </>
      }
    </div>);

}

function V1Hero() {
  return (
    <section style={{ background: V1_PAL.bg, color: V1_PAL.ink }}>
      <V1Nav />
      <div style={{ padding: '88px 48px 96px', maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ maxWidth: 1000, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 3, textTransform: 'uppercase', color: V1_PAL.muted, marginBottom: 24 }}>
            Frankfort, Michigan
          </div>
          <h1 style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 'clamp(52px, 7vw, 96px)', lineHeight: 1.0, letterSpacing: -2.5, margin: '0 0 28px', color: V1_PAL.ink }}>
            Above the lake, <span style={{ fontStyle: 'italic', fontWeight: 300 }}>on the dune.</span>
          </h1>
          <p style={{ fontSize: 21, lineHeight: 1.6, color: V1_PAL.inkSoft, maxWidth: 760, margin: '0 auto' }}>
            Forty-two Scandinavian-inspired residences in three phases — <em style={{ fontFamily: V1_FONT_DISPLAY }}>The Lake</em> directly on the water, <em style={{ fontFamily: V1_FONT_DISPLAY }}>The Ridge</em> looking out to Lake Michigan, and <em style={{ fontFamily: V1_FONT_DISPLAY }}>The Trail</em> along the Betsie Valley.
          </p>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: V1_PAL.muted, maxWidth: 760, margin: '18px auto 0', fontFamily: V1_FONT_MONO, letterSpacing: 1.5, textTransform: 'uppercase' }}>
            Construction begins Summer 2026 · Reservations open across all phases
          </p>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center', justifyContent: 'center', marginTop: 40, flexWrap: 'wrap' }}>
            <a href="#residences" style={{ padding: '18px 36px', background: V1_PAL.ink, color: V1_PAL.bg, textDecoration: 'none', fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 2, textTransform: 'uppercase', borderRadius: 0 }}>View residences →</a>
            <a href="#contact" style={{ padding: '18px 28px', color: V1_PAL.ink, fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 2, textTransform: 'uppercase', textDecoration: 'none', border: `1px solid ${V1_PAL.ink}` }}>Inquire</a>
          </div>
        </div>
        <div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 9', marginTop: 72, border: `1px solid ${V1_PAL.line}`, overflow: 'hidden' }}>
          <V1HeroVideo />
        </div>
      </div>
    </section>);

}

function V1Overview() {
  return (
    <section style={{ background: V1_PAL.bg, color: V1_PAL.ink, padding: '140px 72px 40px', display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 96 }}>
      <div>
        <div style={{ fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 3, textTransform: 'uppercase', color: V1_PAL.muted, marginBottom: 20 }}>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 forty-two-residence 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>
    </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: 18, letterSpacing: 2.5, textTransform: 'uppercase', color: C.muted, marginTop: 12 }}>{label}</div>
    </div>);

}

// ─── V1 Phases — the three releases, equal weight ──────────────────
function V1Phases() {
  const phases = [
  {
    id: 'L',
    meta: BUILDINGS.find((b) => b.id === 'L'),
    img: IMG.elevLake,
    headline: 'Directly on the water.',
    detail: 'Twelve two-story residences set at lake level — walk-out patios, morning light off the bay, and private dockage just beyond the door.'
  },
  {
    id: 'R',
    meta: BUILDINGS.find((b) => b.id === 'R'),
    img: IMG.elevRidge,
    headline: 'Expansive Lake Michigan views.',
    detail: 'Eighteen residences stepped highest on the site. Walkout lower levels, open upper floors, and west-facing balconies for the long view at sunset.'
  },
  {
    id: 'T',
    meta: BUILDINGS.find((b) => b.id === 'T'),
    img: IMG.elevTrail,
    headline: 'Trail-side, quietly tucked.',
    detail: 'Twelve residences set mid-slope along the Betsie Valley Trail — direct trail access, filtered Lake Michigan views, and the quietest pocket on the property.'
  }];

  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: 64 }}>
        <div>
          <div style={{ fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 3, textTransform: 'uppercase', color: V1_PAL.muted, marginBottom: 20 }}>The Residences</div>
          <h2 style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 88, letterSpacing: -2, lineHeight: 1, margin: 0 }}>Three phases,<br /><span style={{ fontStyle: 'italic' }}>stepped up the dune.</span></h2>
        </div>
        <div style={{ fontFamily: V1_FONT_DISPLAY, fontStyle: 'italic', fontSize: 20, lineHeight: 1.35, color: V1_PAL.inkSoft, fontWeight: 300, maxWidth: 420 }}>
          Forty-two residences across three distinct releases — each tuned to a different elevation, a different orientation, a different way of meeting the water.
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {phases.map((p) =>
        <article key={p.id} style={{ background: V1_PAL.bg, border: `1px solid ${V1_PAL.line}`, display: 'flex', flexDirection: 'column' }}>
            <div style={{ aspectRatio: '4/3', position: 'relative', overflow: 'hidden', borderBottom: `1px solid ${V1_PAL.line}` }}>
              <img src={p.img} alt={`${p.meta.name} elevation`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              <div style={{ position: 'absolute', top: 14, left: 14, display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', background: V1_PAL.bg, border: `1px solid ${V1_PAL.line}`, fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 2, color: V1_PAL.ink, textTransform: 'uppercase' }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#3f8a4f' }} />
                {p.meta.statusLabel}
              </div>
            </div>
            <div style={{ padding: 32, display: 'flex', flexDirection: 'column', flex: 1 }}>
              <h3 style={{ fontFamily: V1_FONT_DISPLAY, fontSize: 40, fontWeight: 400, letterSpacing: -1, margin: 0, lineHeight: 1 }}>{p.meta.name}</h3>
              <div style={{ fontFamily: V1_FONT_DISPLAY, fontStyle: 'italic', fontSize: 18, color: V1_PAL.inkSoft, marginTop: 8, marginBottom: 20, lineHeight: 1.25 }}>{p.headline}</div>
              <p style={{ fontSize: 18, lineHeight: 1.6, color: V1_PAL.inkSoft, margin: 0, flex: 1 }}>{p.detail}</p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 24, paddingTop: 20, borderTop: `1px solid ${V1_PAL.line}`, fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 2, color: V1_PAL.muted, textTransform: 'uppercase' }}>
                <div>
                  <div>Residences</div>
                  <div style={{ color: V1_PAL.ink, fontSize: 18, marginTop: 4, letterSpacing: 0, textTransform: 'none' }}>{p.meta.units}</div>
                </div>
                <div>
                  <div>Position</div>
                  <div style={{ color: V1_PAL.ink, fontSize: 18, marginTop: 4, letterSpacing: 0, textTransform: 'none' }}>{p.meta.orientation}</div>
                </div>
              </div>
            </div>
          </article>
        )}
      </div>
    </section>);

}

// ─── V1 Floor Plans — 2BR + 3BR walkout, with 2D/3D toggle ────────
function V1Residences({ onOpenLightbox }) {
  const plans = [
  { name: '2BR + 2 bath', sqft: '1,200', beds: 2, baths: 2, price: 'Pricing TBD', desc: 'Two bedrooms, two baths, open kitchen-living with west-facing balcony over Lake Michigan. Includes one private garage. Offered across The Ridge and The Trail.' },
  { name: '3-story walkout', sqft: '2,400', beds: 4, baths: 3, price: 'Pricing TBD', desc: 'Four bedrooms, three baths across three stories with walkout lower level. Two balconies, vaulted top-floor ceilings, double-island kitchen, two-car garage.' }];

  return (
    <section id="floor-plans" style={{ background: V1_PAL.bg, 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: 18, letterSpacing: 3, textTransform: 'uppercase', color: V1_PAL.muted, marginBottom: 20 }}>Floor Plans</div>
          <h2 style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 88, letterSpacing: -2, lineHeight: 1, margin: 0 }}>Two layouts,<br /><span style={{ fontStyle: 'italic' }}>built for the dune.</span></h2>
        </div>
        <div style={{ fontFamily: V1_FONT_DISPLAY, fontStyle: 'italic', fontSize: 22, lineHeight: 1.3, color: V1_PAL.inkSoft, fontWeight: 300, maxWidth: 420 }}>
          An open two-bedroom and a three-story walkout, refined across every phase. West-facing windows, vaulted top-floor ceilings, and a private garage with every residence.
        </div>
      </div>
      <div style={{ height: 8 }} />

      <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="3D" />
            </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: 18, letterSpacing: 2, color: V1_PAL.muted, textTransform: 'uppercase' }}>{p.price}</span>
            </div>
            <div style={{ display: 'flex', gap: 20, fontFamily: V1_FONT_MONO, fontSize: 18, 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: 18, 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: 18, 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: 18, letterSpacing: 2, textTransform: 'uppercase' }}>Interactive tour</a>
            </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() {
  const [siteView, setSiteView] = React.useState('aerial'); // 'aerial' | 'schematic'
  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: 18, letterSpacing: 3, textTransform: 'uppercase', color: V1_PAL.muted, marginBottom: 20 }}>Site Plan</div>
          <h2 style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 88, letterSpacing: -2, lineHeight: 1, margin: 0 }}>The site,<br /><span style={{ fontStyle: 'italic' }}>from above.</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 Lake on the waterfront, The Trail mid-slope, and The Ridge atop the dune. Twenty-five boat slips, shared dock, and direct trail access.</div>
      </div>
      <PhaseBar palette={V1_PAL} displayFont={V1_FONT_DISPLAY} monoFont={V1_FONT_MONO} />
      <div style={{ height: 40 }} />
      {/* Aerial / Schematic toggle */}
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
        <div style={{ display: 'inline-flex', gap: 4, background: V1_PAL.card, border: `1px solid ${V1_PAL.line}`, padding: 4 }}>
          {[['aerial', 'Aerial plan'], ['schematic', 'Schematic']].map(([k, l]) =>
          <button key={k} onClick={() => setSiteView(k)} style={{ padding: '10px 20px', background: siteView === k ? V1_PAL.ink : 'transparent', color: siteView === k ? V1_PAL.bg : V1_PAL.ink, border: 'none', fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 3, textTransform: 'uppercase', cursor: 'pointer', borderRadius: 0 }}>{l}</button>
          )}
        </div>
      </div>
      {siteView === 'schematic' ?
      <SitePlan palette={V1_PAL} /> :

      <div style={{ background: V1_PAL.card, border: `1px solid ${V1_PAL.line}`, padding: 24 }}>
          <img src={IMG.sitePlanAerial} alt="Dune Ridge aerial site plan — The Lake, The Trail, and The Ridge" style={{ width: '100%', height: 'auto', display: 'block' }} />
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 16, fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 2, color: V1_PAL.muted, textTransform: 'uppercase' }}>
            <span>Aerial site plan · The Lake / The Trail / The Ridge</span>
            <span>N ↑ · M22 east edge</span>
          </div>
        </div>
      }
    </section>);

}

// ─── V1 Interiors ───────────────────────────────────────────────────
function V1Interiors({ onOpenLightbox }) {
  const [unit, setUnit] = React.useState('2BR'); // '2BR' | '3BR'
  // Curated per-unit interior compositions — hero + supporting tiles
  const sets = {
    '2BR': {
      headline: 'A two-bedroom,',
      headlineItalic: 'open to the lake.',
      caption: 'Living, kitchen, and balcony share one west-facing volume — the residence opens itself to the water at golden hour.',
      hero: { src: IMG.int2brLiving, label: 'Living room' },
      grid: [
      { src: IMG.int2brKitchenA, label: 'Kitchen' },
      { src: IMG.int2brDining, label: 'Dining' },
      { src: IMG.int2brBed1, label: 'Primary bedroom' },
      { src: IMG.int2brBath1, label: 'Primary bath' },
      { src: IMG.int2brBed2, label: 'Bedroom 2' },
      { src: IMG.int2brBalcony, label: 'Balcony · sunset over the bay' }]

    },
    '3BR': {
      headline: 'Three bedrooms,',
      headlineItalic: 'a walkout to grass.',
      caption: 'Three stories — open kitchen-living above, family room below, and a walkout patio level with the dune grass.',
      hero: { src: IMG.int3brLivingKitchen, label: 'Open living + kitchen' },
      grid: [
      { src: IMG.int3brKitchen, label: 'Kitchen' },
      { src: IMG.int3brDiningLiving, label: 'Dining' },
      { src: IMG.int3brFamily, label: 'Family room' },
      { src: IMG.int3brBed1, label: 'Primary bedroom' },
      { src: IMG.int3brBath1, label: 'Primary bath' },
      { src: IMG.int3brPatio, label: 'Walkout patio' }]

    }
  };
  const set = sets[unit];

  return (
    <section id="interiors" 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: 18, letterSpacing: 3, textTransform: 'uppercase', color: V1_PAL.muted, marginBottom: 20 }}>Interiors</div>
          <h2 style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 88, letterSpacing: -2, lineHeight: 1, margin: 0 }}>
            {set.headline}<br />
            <span style={{ fontStyle: 'italic' }}>{set.headlineItalic}</span>
          </h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 18 }}>
          <div style={{ fontFamily: V1_FONT_DISPLAY, fontStyle: 'italic', fontSize: 20, lineHeight: 1.35, color: V1_PAL.inkSoft, fontWeight: 300, maxWidth: 380 }}>{set.caption}</div>
          <div style={{ display: 'inline-flex', gap: 4, background: V1_PAL.card, border: `1px solid ${V1_PAL.line}`, padding: 4 }}>
            {['2BR', '3BR'].map((u) =>
            <button key={u} onClick={() => setUnit(u)} style={{ padding: '10px 20px', background: unit === u ? V1_PAL.ink : 'transparent', color: unit === u ? V1_PAL.bg : V1_PAL.ink, border: 'none', fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 3, textTransform: 'uppercase', cursor: 'pointer', borderRadius: 0 }}>{u === '2BR' ? '2BR · Open' : '3BR · Walkout'}</button>
            )}
          </div>
        </div>
      </div>

      {/* Hero shot — full width */}
      <div style={{ position: 'relative', aspectRatio: '16/9', overflow: 'hidden', marginBottom: 16, border: `1px solid ${V1_PAL.line}` }}>
        <img src={set.hero.src} alt={set.hero.label} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', left: 24, bottom: 24, padding: '8px 14px', background: V1_PAL.bg, fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 2, color: V1_PAL.ink, textTransform: 'uppercase', border: `1px solid ${V1_PAL.line}` }}>{set.hero.label}</div>
      </div>

      {/* Supporting grid */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {set.grid.map((g, i) =>
        <div key={i} style={{ position: 'relative', aspectRatio: '4/3', overflow: 'hidden', border: `1px solid ${V1_PAL.line}` }}>
            <img src={g.src} alt={g.label} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{ position: 'absolute', left: 14, bottom: 14, padding: '6px 10px', background: V1_PAL.bg, fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 1.8, color: V1_PAL.inkSoft, textTransform: 'uppercase' }}>{g.label}</div>
          </div>
        )}
      </div>
    </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: 18, letterSpacing: 3, textTransform: 'uppercase', color: V1_PAL.bgAlt, marginBottom: 20 }}>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: 18, lineHeight: 1.6, opacity: 0.85, maxWidth: 440, margin: '0 0 36px' }}>A shared amenity deck with firepit, dining, and grills opens to a boardwalk down to the water. Direct trailhead access onto the Betsie Valley Trail.</p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, borderTop: `1px solid ${V1_PAL.inkSoft}`, paddingTop: 32 }}>
            {[
            ['Waterfront', 'Dock · firepit · grills'],
            ['Wellness', 'Yoga lawn · Betsie Valley Trail'],
            ['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: 18, 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: 18, letterSpacing: 3, textTransform: 'uppercase', color: V1_PAL.muted, marginBottom: 20 }}>Frankfort</div>
          <h2 style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 88, letterSpacing: -2, lineHeight: 1, margin: 0 }}>A Frankfort year,<br /><span style={{ fontStyle: 'italic' }}>in reach.</span></h2>
        </div>
        <div style={{ fontFamily: V1_FONT_DISPLAY, fontStyle: 'italic', fontSize: 20, lineHeight: 1.3, color: V1_PAL.inkSoft, fontWeight: 300, maxWidth: 360 }}>A ten-minute walk to downtown. Sandy beaches and charter fishing in summer, the Betsie Valley Trail in fall, ski hills and a working harbor through winter — a small Lake Michigan town that doesn’t pack up after Labor Day.</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: 'The site, over Betsie Bay' },
        { src: IMG.trailSunset, span: 'grid-column: span 4; grid-row: span 2', label: 'Betsie Valley Trail · on-site' },
        { src: IMG.dockMorning, span: 'grid-column: span 4; grid-row: span 2', label: 'The dock · morning' },
        { src: IMG.elevLake, span: 'grid-column: span 5; grid-row: span 2', label: 'The Lake residences · waterfront' },
        { src: IMG.dockBSunset, span: 'grid-column: span 3; grid-row: span 2', label: 'The dock · sunset' },
        { src: IMG.aerialBackC, span: 'grid-column: span 6; grid-row: span 2', label: 'Looking west toward Lake Michigan' },
        { src: IMG.trailNoon, span: 'grid-column: span 6; grid-row: span 2', label: 'The trail · midday' }].
        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: 18, 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: 18, 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: 56, letterSpacing: -1.5, lineHeight: 1.04, margin: '0 0 28px' }}>
            Step inside,<br /><span style={{ fontStyle: 'italic' }}>before the lift goes in.</span>
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.6, opacity: 0.85, maxWidth: 440, margin: 0 }}>
            A preliminary 360° walk-through of a Ridge residence. Drag to look around the great room, step out to the balcony, follow the path down to the dock — a year ahead of the keys.
          </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: 18, letterSpacing: 3, textTransform: 'uppercase', color: V1_PAL.muted, marginBottom: 20 }}>Contact</div>
          <h2 style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 96, letterSpacing: -2.5, lineHeight: 0.98, margin: '0 0 40px' }}>Get in<br /><span style={{ fontStyle: 'italic' }}>touch.</span></h2>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: V1_PAL.inkSoft, maxWidth: 480, margin: '0 0 48px' }}>Reservations are open across all three phases ahead of a Summer 2026 groundbreaking. We&rsquo;d be glad to walk you through plans, pricing, and a private preview of the site.</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: 18, letterSpacing: 2.5, textTransform: 'uppercase', color: V1_PAL.muted, marginBottom: 8 }}>Sales Office</div>
              <div style={{ fontSize: 18, lineHeight: 1.5 }}>412 Main Street<br />Frankfort, MI 49635</div>
            </div>
            <div>
              <div style={{ fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 2.5, textTransform: 'uppercase', color: V1_PAL.muted, marginBottom: 8 }}>Contact</div>
              <div style={{ fontSize: 18, lineHeight: 1.5 }}>KariKing@c21northland.com<br />231-651-0923</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: 18, letterSpacing: 2, color: V1_PAL.muted, textTransform: 'uppercase', marginBottom: 24 }}>Inquiries route to hello@duneridge.co and our listing team.</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: 18, 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: 18, 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: 18, 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: '32px 72px 28px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 22, paddingBottom: 22, borderBottom: `1px solid ${V1_PAL.inkSoft}` }}>
        <V1Wordmark size={96} onDark />
        <div style={{ display: 'flex', gap: 32, fontFamily: V1_FONT_MONO, fontSize: 18, 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: 18, letterSpacing: 2, opacity: 0.5, textTransform: 'uppercase' }}>
        <span>© 2026 Dune Ridge LLC · Frankfort, Michigan</span>
        <span><a href="https://solutionstud.io/" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none' }}>Built by Solution Studio</a></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 />
      <V1Overview />
      <V1Phases />
      <V1Flyover />
      <V1Residences onOpenLightbox={lb.open} />
      <V1Interiors onOpenLightbox={lb.open} />
      <V1Site />
      <V1Amenities />
      <V1Lifestyle onOpenLightbox={lb.open} />
      <V1Contact onReserve={() => setResOpen(true)} />
      <V1Footer />
      <ReservationModal open={resOpen} onClose={() => setResOpen(false)} palette={V1_PAL} accentLabel="Dune Ridge at Betsie Bay" />
      {lb.node}
    </div>);

}

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