// 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',
  mono: "'Mona Sans', system-ui, sans-serif" // unified label/UI face — retires the clashing monospace in shared components
};

const V1_FONT_DISPLAY = "'Newsreader', Georgia, serif";
const V1_FONT_BODY = "'Mona Sans', system-ui, sans-serif";
const V1_FONT_MONO = "'Mona Sans', system-ui, sans-serif"; // unified with body — Geist Mono retired (clashed with the editorial set)

// ─── Flexible gallery lightbox — enlarge any set of images, with arrows ────
function useV1Lightbox() {
  const [state, setState] = React.useState(null); // { items: [{src,label}], idx }
  const open = (items, idx = 0) => setState({ items, idx });
  const close = () => setState(null);
  const prev = () => setState((s) => s && { ...s, idx: (s.idx - 1 + s.items.length) % s.items.length });
  const next = () => setState((s) => s && { ...s, idx: (s.idx + 1) % s.items.length });
  React.useEffect(() => {
    if (!state) return;
    const on = (e) => {if (e.key === 'Escape') close();if (e.key === 'ArrowLeft') prev();if (e.key === 'ArrowRight') next();};
    window.addEventListener('keydown', on);
    return () => window.removeEventListener('keydown', on);
  }, [state]);
  const it = state && state.items[state.idx];
  const node = state ?
  <div onClick={close} style={{ position: 'fixed', inset: 0, background: 'rgba(10,8,5,0.95)', zIndex: 9999, display: 'grid', placeItems: 'center', padding: 'clamp(20px, 5vw, 72px)' }}>
      <img src={it.src} alt={it.label || ''} onClick={(e) => e.stopPropagation()} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', boxShadow: '0 24px 80px rgba(0,0,0,0.5)' }} />
      <div style={{ position: 'absolute', top: 24, left: 24, right: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: '#f5f0e6', fontFamily: V1_FONT_MONO, fontSize: 16, letterSpacing: 2, textTransform: 'uppercase' }}>
        <span>{String(state.idx + 1).padStart(2, '0')} / {String(state.items.length).padStart(2, '0')}{it.label ? ` · ${it.label}` : ''}</span>
        <button onClick={(e) => {e.stopPropagation();close();}} style={{ background: 'none', border: 'none', color: '#f5f0e6', fontSize: 28, cursor: 'pointer', lineHeight: 1 }}>×</button>
      </div>
      {state.items.length > 1 &&
      <>
          <button onClick={(e) => {e.stopPropagation();prev();}} style={{ position: 'absolute', left: 24, top: '50%', transform: 'translateY(-50%)', background: 'rgba(10,8,5,0.4)', border: '1px solid rgba(245,240,230,0.35)', color: '#f5f0e6', width: 54, height: 54, cursor: 'pointer', fontSize: 24 }}>‹</button>
          <button onClick={(e) => {e.stopPropagation();next();}} style={{ position: 'absolute', right: 24, top: '50%', transform: 'translateY(-50%)', background: 'rgba(10,8,5,0.4)', border: '1px solid rgba(245,240,230,0.35)', color: '#f5f0e6', width: 54, height: 54, cursor: 'pointer', fontSize: 24 }}>›</button>
        </>
      }
    </div> :
  null;
  return { open, node };
}

// ─── Tour modal — opens a 360° walkthrough over the page ────────────
function useTourModal() {
  const [tour, setTour] = React.useState(null); // { url, label }
  const open = (label, url) => setTour({ label, url });
  const close = () => setTour(null);
  React.useEffect(() => {
    if (!tour) return;
    const on = (e) => {if (e.key === 'Escape') close();};
    window.addEventListener('keydown', on);
    return () => window.removeEventListener('keydown', on);
  }, [tour]);
  const node = tour ?
  <div onClick={close} style={{ position: 'fixed', inset: 0, background: 'rgba(10,8,5,0.92)', zIndex: 9999, display: 'grid', placeItems: 'center', padding: 'clamp(16px, 4vw, 56px)' }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: 'min(1200px, 100%)', aspectRatio: '16/9', maxHeight: '100%', position: 'relative', border: `1px solid ${V1_PAL.line}` }}>
        <VirtualTour palette={V1_PAL} label={tour.label} url={tour.url} />
      </div>
      <button onClick={close} style={{ position: 'absolute', top: 20, right: 24, background: 'none', border: 'none', color: '#f5f0e6', fontSize: 30, cursor: 'pointer', lineHeight: 1 }}>×</button>
    </div> :
  null;
  return { open, node };
}

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; }
        }
        @media (max-width: 640px) {
          [data-site-root] .v1-nav { padding: 16px 20px !important; gap: 14px !important; flex-direction: column !important; align-items: center !important; }
          [data-site-root] .v1-nav .v1-nav-logo svg { height: 92px !important; }
          [data-site-root] .v1-nav-links { gap: 12px 16px !important; font-size: 14px !important; justify-content: center !important; }
          [data-site-root] .v1-nav-cta { order: -1; }
        }
      `}</style>
      <a href="#" className="v1-nav-logo" style={{ display: 'block', textDecoration: 'none', color: 'inherit' }}>
        <LogoMark height={112} />
      </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" className="v1-nav-cta" 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, display: 'flex', flexDirection: 'column' }}>
      <style>{`
        .v1-hero-inner {
          flex: 1;
          display: grid;
          grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
          gap: 56px;
          align-items: center;
          padding: 28px 48px 44px;
          max-width: 1640px;
          margin: 0 auto;
          width: 100%;
        }
        .v1-hero-copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
        @media (max-width: 1000px) {
          .v1-hero-inner {
            grid-template-columns: 1fr;
            gap: 32px;
            align-content: start;
            padding: 36px 32px 56px;
          }
          .v1-hero-copy { align-items: center; text-align: center; }
          .v1-hero-video-wrap { order: -1; }
        }
        @media (max-width: 600px) {
          .v1-hero-inner { padding: 24px 20px 44px; gap: 26px; }
          .v1-hero-eyebrow { margin-bottom: 16px !important; }
          .v1-hero-cta { width: 100%; }
          .v1-hero-cta a { flex: 1; text-align: center; }
        }
      `}</style>
      <V1Nav />
      <div className="v1-hero-inner">
        <div className="v1-hero-copy">
          <div className="v1-hero-eyebrow" style={{ fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 3, textTransform: 'uppercase', color: V1_PAL.muted, marginBottom: 22 }}>
            Frankfort, Michigan
          </div>
          <h1 style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 'clamp(44px, 4.8vw, 84px)', lineHeight: 1.0, letterSpacing: -2.5, margin: '0 0 26px', color: V1_PAL.ink }}>
            High on the dune, <span style={{ fontStyle: 'italic', fontWeight: 300 }}>open to the water.</span>
          </h1>
          <p style={{ fontSize: 20, lineHeight: 1.6, color: V1_PAL.inkSoft, maxWidth: 560, margin: 0 }}>
            Forty-two Scandinavian-inspired residences in three phases — <em style={{ fontFamily: V1_FONT_DISPLAY }}>The Lake</em> directly on Betsie Bay with bay and Lake Michigan views, <em style={{ fontFamily: V1_FONT_DISPLAY }}>The Ridge</em> set high overlooking the bay and Lake Michigan, and <em style={{ fontFamily: V1_FONT_DISPLAY }}>The Trail</em> along the Betsie Valley Bike Trail.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: V1_PAL.muted, maxWidth: 560, margin: '16px 0 0', fontFamily: V1_FONT_MONO, letterSpacing: 1.5, textTransform: 'uppercase' }}>
            Construction begins Summer 2026<br />Taking reservations
          </p>
          <div className="v1-hero-cta" style={{ display: 'flex', gap: 14, alignItems: 'center', marginTop: 36, flexWrap: 'wrap' }}>
            <a href="#residences" style={{ padding: '17px 34px', background: V1_PAL.ink, color: V1_PAL.bg, textDecoration: 'none', fontFamily: V1_FONT_MONO, fontSize: 17, letterSpacing: 2, textTransform: 'uppercase', borderRadius: 0 }}>View residences →</a>
            <a href="#contact" style={{ padding: '17px 26px', color: V1_PAL.ink, fontFamily: V1_FONT_MONO, fontSize: 17, letterSpacing: 2, textTransform: 'uppercase', textDecoration: 'none', border: `1px solid ${V1_PAL.ink}` }}>Inquire</a>
          </div>
        </div>
        <div className="v1-hero-video-wrap" style={{ position: 'relative', width: '100%', aspectRatio: '16 / 9', 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: '88px 72px', display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64 }}>
      <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 }}>A lakeside community on Betsie Bay.</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 lakeside community on the shore of Betsie Bay — built around the water, the trail, and the town just beyond. Afternoons on the bay, evenings as the light goes long over Lake Michigan, and a short walk to everything that makes Frankfort, Frankfort. A home on the water you can live in all year.
        </p>
      </div>
    </section>);

}

// ─── V1 Establishing band — a real Frankfort photo between overview & residences ─
function V1Establishing() {
  return (
    <section style={{ background: V1_PAL.bg, padding: '0 0 0' }}>
      <style>{`
        @media (max-width: 640px) {
          [data-site-root] .v1-establishing-cap { padding: 28px 20px 26px !important; }
        }
      `}</style>
      <div style={{ position: 'relative', width: '100%', height: 'clamp(440px, 72vh, 780px)', overflow: 'hidden' }}>
        <img src={IMG.fktChannel} alt="Frankfort’s public beach and the channel out to Lake Michigan" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(31,27,21,0.18) 0%, rgba(31,27,21,0) 32%, rgba(31,27,21,0.05) 62%, rgba(31,27,21,0.62) 100%)' }} />
        <div className="v1-establishing-cap" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '44px 72px 40px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap' }}>
          <div style={{ color: '#f5f0e6' }}>
            <div style={{ fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 3, textTransform: 'uppercase', opacity: 0.9, marginBottom: 14 }}>Frankfort, Michigan</div>
            <div style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 'clamp(30px, 3.4vw, 56px)', lineHeight: 1.04, letterSpacing: -1, maxWidth: 760, textShadow: '0 1px 18px rgba(0,0,0,0.4)' }}>
              Lake Michigan, <span style={{ fontStyle: 'italic' }}>just past the channel.</span>
            </div>
          </div>
          <div style={{ color: '#f5f0e6', fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 2, textTransform: 'uppercase', opacity: 0.85, textAlign: 'right', maxWidth: 360 }}>
            The public beach &amp; pier — a short walk from the dune
          </div>
        </div>
      </div>
    </section>);

}

// ─── V1 Ridge View — the cinematic sunset-balcony moment (sells the Ridge) ─
function V1RidgeView() {
  const lb = useV1Lightbox();
  const views = [
  { src: IMG.int2brBalconyB, label: 'The Ridge · sunset over Lake Michigan' },
  { src: IMG.int2brBalcony, label: 'The Ridge · balcony at golden hour' },
  { src: IMG.aerialBackA, label: 'The Ridge · sunset over the dune' }];

  return (
    <section style={{ background: V1_PAL.ink, padding: 0 }}>
      <style>{`
        @media (max-width: 640px) {
          [data-site-root] .v1-ridgeview-cap { padding: 32px 20px 28px !important; }
        }
      `}</style>
      <button onClick={() => lb.open(views, 0)} aria-label="Enlarge the Ridge sunset views" style={{ all: 'unset', cursor: 'pointer', display: 'block', width: '100%' }}>
        <div style={{ position: 'relative', width: '100%', height: 'clamp(520px, 82vh, 900px)', overflow: 'hidden' }}>
          <img src={IMG.int2brBalconyB} alt="Sunset over Lake Michigan from a Ridge residence balcony" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(31,27,21,0.30) 0%, rgba(31,27,21,0) 30%, rgba(31,27,21,0.04) 58%, rgba(31,27,21,0.66) 100%)' }} />
          <div className="v1-ridgeview-cap" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '56px 72px 52px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap' }}>
            <div style={{ color: '#f6efe3', maxWidth: 880 }}>
              <div style={{ fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 3, textTransform: 'uppercase', opacity: 0.92, marginBottom: 16 }}>The Ridge · west-facing balconies</div>
              <div style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 'clamp(34px, 4.4vw, 72px)', lineHeight: 1.02, letterSpacing: -1.5, textShadow: '0 2px 24px rgba(0,0,0,0.45)' }}>
                Pour something good. <span style={{ fontStyle: 'italic' }}>Watch the lake go gold.</span>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 16px', background: 'rgba(31,27,21,0.62)', color: '#f6efe3', fontFamily: V1_FONT_MONO, fontSize: 15, letterSpacing: 2, textTransform: 'uppercase', whiteSpace: 'nowrap' }}>
              <span>{views.length} views</span>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" /></svg>
            </div>
          </div>
        </div>
      </button>
      {lb.node}
    </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 lb = useV1Lightbox();
  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 the water just beyond the door.',
    gallery: [
    { src: IMG.elevLake, label: 'The Lake · elevation' },
    { src: IMG.aerialBayA, label: 'The Lake · from the bay' },
    { src: IMG.int2brBalcony, label: 'Balcony · golden hour over the bay' },
    { src: IMG.dockBSunset, label: 'Shared deck · sunset' }]

  },
  {
    id: 'R',
    meta: BUILDINGS.find((b) => b.id === 'R'),
    img: IMG.aerialBackA,
    headline: 'Expansive Lake Michigan views.',
    detail: 'Eighteen residences stepped highest on the site. Vaulted upper floors, walkout lower levels, and west-facing balconies built for the long sunset over Lake Michigan.',
    gallery: [
    { src: IMG.int2brBalconyB, label: 'The Ridge · sunset over Lake Michigan' },
    { src: IMG.int2brBalcony, label: 'The Ridge · balcony at golden hour' },
    { src: IMG.aerialBackA, label: 'The Ridge · sunset over the dune' },
    { src: IMG.aerialBackB, label: 'The Ridge · at dusk' },
    { src: IMG.elevRidge, label: 'The Ridge · elevation' }]

  },
  {
    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 a quieter setting a step back from the water.',
    gallery: [
    { src: IMG.elevTrail, label: 'The Trail · elevation' },
    { src: IMG.trailSunset, label: 'The Trail · sunset' },
    { src: IMG.trailNoon, label: 'The Trail · midday' },
    { src: IMG.aerialBackC, label: 'Looking west toward Lake Michigan' }]

  }];

  return (
    <section id="residences" style={{ background: V1_PAL.card, color: V1_PAL.ink, padding: '88px 72px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 44 }}>
        <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>{`
        @media (max-width: 600px) {
          .v1-phase-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
        }
      `}</style>
      <div className="v1-phase-grid" 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' }}>
            <button onClick={() => lb.open(p.gallery, 0)} aria-label={`View ${p.meta.name} gallery`} style={{ all: 'unset', cursor: 'pointer', display: 'block' }}>
              <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', transition: 'transform 600ms' }} onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.04)'} onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'} />
                <div style={{ position: 'absolute', right: 14, bottom: 14, display: 'flex', alignItems: 'center', gap: 8, padding: '7px 12px', background: 'rgba(31,27,21,0.78)', color: '#f5f0e6', fontFamily: V1_FONT_MONO, fontSize: 14, letterSpacing: 2, textTransform: 'uppercase' }}>
                  <span>{p.gallery.length} views</span>
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" /></svg>
                </div>
              </div>
            </button>
            <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>
      {lb.node}
    </section>);

}

// ─── V1 Floor Plans — 2BR + 3BR walkout, with 2D/3D toggle ────────
function V1Residences({ onOpenLightbox }) {
  const lb = useV1Lightbox();
  const tour = useTourModal();
  const plans = [
  { name: '2 Bed · 2 Bath', sqft: '1,176', beds: 2, baths: 2, price: 'Starting in the $600s', pdf: 'plans/dune-ridge-2br.pdf', desc: 'Two bedrooms and two baths with an open kitchen-living and a west-facing balcony over the water. Eight-foot glass on the sliders and view-facing windows — well above the standard 6’8” — plus one private garage. Offered across every phase.' },
  { name: '4 Bed · 3 Bath Walkout', sqft: '2,314', beds: 4, baths: 3, price: 'Starting in the $800s', pdf: 'plans/dune-ridge-4br-walkout.pdf', desc: 'A four-bedroom, three-bath residence with a walkout lower level opening onto the dune grass. Vaulted upper-level ceilings, eight-foot glass framing the view, an open kitchen-living, a private balcony, and a two-car garage.' }];

  const planGalleries = [
  [{ src: IMG.plan2br3d, label: '2 Bed · 2 Bath — floor plan' }],
  [{ src: IMG.plan3brUpper3d, label: '4 Bed Walkout — upper level' }, { src: IMG.plan3brLower3d, label: '4 Bed Walkout — lower walkout level' }]];


  return (
    <section id="floor-plans" style={{ background: V1_PAL.bg, color: V1_PAL.ink, padding: '88px 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 plans,<br /><span style={{ fontStyle: 'italic' }}>made for the view.</span></h2>
        </div>
        <div style={{ fontFamily: V1_FONT_DISPLAY, fontStyle: 'italic', fontSize: 22, lineHeight: 1.3, color: V1_PAL.inkSoft, fontWeight: 300, maxWidth: 420 }}>
          A two-bedroom, two-bath residence and a four-bedroom walkout, refined across every phase. Eight-foot glass on the sliders and view-facing windows, vaulted upper ceilings, and a private garage with every residence.
        </div>
      </div>
      <div style={{ height: 8 }} />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, marginBottom: 56 }}>
        {plans.map((p, i) =>
        <div key={p.name} style={{ background: V1_PAL.bg, padding: 40, border: `1px solid ${V1_PAL.line}`, display: 'flex', flexDirection: 'column' }}>
            {/* 3D plan rendering — click to enlarge */}
            <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" />
              <button onClick={() => lb.open(planGalleries[i], 0)} aria-label="Enlarge floor plan" style={{ position: 'absolute', top: 12, right: 12, display: 'flex', alignItems: 'center', gap: 7, padding: '7px 11px', background: 'rgba(31,27,21,0.82)', color: '#f5f0e6', border: 'none', fontFamily: V1_FONT_MONO, fontSize: 14, letterSpacing: 2, textTransform: 'uppercase', cursor: 'pointer', zIndex: 3 }}>
                Enlarge
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" /></svg>
              </button>
            </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, marginTop: 'auto', flexWrap: 'wrap' }}>
              <a href={p.pdf} target="_blank" rel="noopener" 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>
              <button onClick={() => tour.open(`${p.name} · 360° tour`)} style={{ padding: '12px 20px', border: `1px solid ${V1_PAL.ink}`, background: 'transparent', color: V1_PAL.ink, cursor: 'pointer', fontFamily: V1_FONT_MONO, fontSize: 18, letterSpacing: 2, textTransform: 'uppercase' }}>Interactive tour</button>
            </div>
          </div>
        )}
      </div>
      {lb.node}
      {tour.node}
    </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 lb = useV1Lightbox();
  return (
    <section id="site" style={{ background: V1_PAL.bg, color: V1_PAL.ink, padding: '88px 72px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 44 }}>
        <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 — all with direct access onto the Betsie Valley Trail.</div>
      </div>
      <button onClick={() => lb.open([{ src: IMG.sitePlanAerial, label: 'Aerial site plan · The Lake / The Trail / The Ridge' }], 0)} aria-label="Enlarge site plan" style={{ all: 'unset', cursor: 'pointer', display: 'block', width: '100%' }}>
        <div style={{ background: V1_PAL.card, border: `1px solid ${V1_PAL.line}`, padding: 24, position: 'relative' }}>
          <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={{ position: 'absolute', right: 36, top: 36, display: 'flex', alignItems: 'center', gap: 8, padding: '7px 12px', background: 'rgba(31,27,21,0.78)', color: '#f5f0e6', fontFamily: V1_FONT_MONO, fontSize: 14, letterSpacing: 2, textTransform: 'uppercase' }}>
            <span>Enlarge</span>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" /></svg>
          </div>
          <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>
      </button>
      {lb.node}
    </section>);

}

// ─── V1 Interiors ───────────────────────────────────────────────────
function V1Interiors({ onOpenLightbox }) {
  const [unit, setUnit] = React.useState('2BR'); // '2BR' | '3BR'
  const lb = useV1Lightbox();
  // Curated per-unit interior compositions — hero + supporting tiles
  const sets = {
    '2BR': {
      headline: 'A two-bedroom,',
      headlineItalic: 'facing the water.',
      caption: 'Living, kitchen, and balcony flow together in one west-facing space — with water views all day long behind eight-foot glass.',
      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: 'Four bedrooms,',
      headlineItalic: 'a walkout to grass.',
      caption: 'Vaulted, open kitchen-living on the main level, with bedrooms and a family room on the walkout lower level — 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: '88px 72px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 40 }}>
        <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' : '4BR Walkout'}</button>
            )}
          </div>
        </div>
      </div>

      {/* Hero shot — full width · click to enlarge */}
      <button onClick={() => lb.open([set.hero, ...set.grid], 0)} aria-label={`Enlarge ${set.hero.label}`} style={{ all: 'unset', cursor: 'pointer', display: 'block', width: '100%' }}>
        <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', transition: 'transform 600ms' }} onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.03)'} onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'} />
          <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 style={{ position: 'absolute', right: 16, top: 16, display: 'flex', alignItems: 'center', gap: 8, padding: '7px 12px', background: 'rgba(31,27,21,0.78)', color: '#f5f0e6', fontFamily: V1_FONT_MONO, fontSize: 14, letterSpacing: 2, textTransform: 'uppercase' }}>
            <span>{set.grid.length + 1} views</span>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" /></svg>
          </div>
        </div>
      </button>

      {/* Supporting grid — click any room to enlarge */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {set.grid.map((g, i) =>
        <button key={i} onClick={() => lb.open([set.hero, ...set.grid], i + 1)} aria-label={`Enlarge ${g.label}`} style={{ all: 'unset', cursor: 'pointer', display: 'block' }}>
            <div 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', transition: 'transform 600ms' }} onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.04)'} onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'} />
              <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>
          </button>
        )}
      </div>
      {lb.node}
    </section>);

}

function V1Amenities() {
  return (
    <section id="amenities" style={{ background: V1_PAL.ink, color: V1_PAL.bg, padding: 0 }}>
      <style>{`
        @media (max-width: 820px) {
          .v1-amenities-grid { grid-template-columns: 1fr !important; min-height: 0 !important; }
          .v1-amenities-img { height: 56vw; min-height: 280px; }
          .v1-amenities-body { padding: 64px 32px !important; }
        }
        @media (max-width: 640px) {
          .v1-amenities-body { padding: 56px 20px !important; }
        }
      `}</style>
      <div className="v1-amenities-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 700 }}>
        <div className="v1-amenities-img" style={{ position: 'relative', overflow: 'hidden' }}>
          <img src={IMG.dockBSunset} alt="The shared amenity deck at sunset — firepit, dining, and grills above the dune grass" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
        <div className="v1-amenities-body" style={{ padding: '72px 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: '88px 72px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 40 }}>
        <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: 380 }}>One of Northern Michigan’s most sought-after harbor towns — quaint shops, restaurants, a theater, and a hospital, all a short walk from the dune. Hiking, biking, and golf along the scenic, iconic M-22 — and a working harbor that doesn’t pack up after Labor Day.</div>
      </div>

      {/* Grid — masonry-like via CSS grid with tall/wide cells */}
      <style>{`
        @media (max-width: 760px) {
          .v1-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 130px !important; gap: 12px !important; }
          .v1-gallery-grid > div { grid-column: span 1 !important; grid-row: span 2 !important; }
        }
        @media (max-width: 460px) {
          .v1-gallery-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
      <div className="v1-gallery-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gridAutoRows: '180px', gap: 16 }}>
        {[
        { src: IMG.fktLighthouse, idx: 0, span: 'grid-column: span 8; grid-row: span 2', label: 'Frankfort North Breakwater Light' },
        { src: IMG.fktMainStreet, idx: 1, span: 'grid-column: span 4; grid-row: span 2', label: 'Main Street to Lake Michigan' },
        { src: IMG.fktDowntown, idx: 2, span: 'grid-column: span 4; grid-row: span 2', label: 'Downtown & the harbor' },
        { src: IMG.fktBeach, idx: 3, span: 'grid-column: span 4; grid-row: span 2', label: 'Frankfort Beach' },
        { src: IMG.fktBeachSwings, idx: 4, span: 'grid-column: span 4; grid-row: span 2', label: 'The beach at Betsie Bay' },
        { src: IMG.fktBeachTown, idx: 5, span: 'grid-column: span 5; grid-row: span 2', label: 'Beach & town from the bay' },
        { src: IMG.fktBay, idx: 6, span: 'grid-column: span 7; grid-row: span 2', label: 'Frankfort across Betsie Bay' }].
        map((g, i) =>
        <div key={i} style={{ ...parseSpan(g.span), position: 'relative', overflow: 'hidden', cursor: 'pointer' }} onClick={() => onOpenLightbox(g.idx)}>
            <img src={g.src} alt={g.label} style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 600ms' }} onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.04)'} onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'} />
            <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: '88px 72px' }}>
      <style>{`
        @media (max-width: 980px) {
          .v1-flyover-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
        }
        @media (max-width: 600px) {
          #neighborhood ~ section, .v1-flyover-grid { }
        }
      `}</style>
      <div className="v1-flyover-grid" 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° · The Ridge</div>
          <h2 style={{ fontFamily: V1_FONT_DISPLAY, fontWeight: 300, fontSize: 56, letterSpacing: -1.5, lineHeight: 1.04, margin: '0 0 28px' }}>
            Step onto the balcony,<br /><span style={{ fontStyle: 'italic' }}>before move-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 upper-level residence — the highest vantage on the site, with vaulted ceilings, 8-foot glass, and the long west view over Lake Michigan. Drag to look around the great room and step out onto the balcony.
          </p>
        </div>
        <div style={{ aspectRatio: '16/9', width: '100%' }}>
          <VirtualTour palette={V1_PAL} label="The Ridge · upper level" caption="Preliminary rendering" />
        </div>
      </div>
    </section>);

}

function V1Contact({ onReserve }) {
  return (
    <section id="contact" style={{ background: V1_PAL.bgAlt, color: V1_PAL.ink, padding: '88px 72px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, 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 }}>408 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} labelFont={V1_FONT_MONO} />
            <Field label="Email" value="" onChange={() => {}} C={V1_PAL} labelFont={V1_FONT_MONO} />
            <Field label="Phone" value="" onChange={() => {}} C={V1_PAL} labelFont={V1_FONT_MONO} />
            <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={{ fontFamily: V1_FONT_BODY, fontSize: 13, lineHeight: 1.6, opacity: 0.45, maxWidth: 1100, margin: '0 0 20px' }}>
        All renderings, illustrations, floor plans, site plans, and visual representations on this website are conceptual in nature and are intended for illustrative purposes only. They are not to be relied upon as a precise depiction of the final product.
      </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);
  const flb = useLightbox(FRANKFORT_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 />
      <V1Establishing />
      <V1Phases />
      <V1RidgeView />
      <V1Flyover />
      <V1Residences onOpenLightbox={lb.open} />
      <V1Interiors onOpenLightbox={lb.open} />
      <V1Site />
      <V1Amenities />
      <V1Lifestyle onOpenLightbox={flb.open} />
      <V1Contact onReserve={() => setResOpen(true)} />
      <V1Footer />
      <ReservationModal open={resOpen} onClose={() => setResOpen(false)} palette={V1_PAL} accentLabel="Dune Ridge at Betsie Bay" />
      {lb.node}
      {flb.node}
    </div>);

}

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