// Zen Interiors — Home page
function HomePage({ navigate, openEnquiry }) {
  const projects = window.ZEN_PROJECTS;
  const featured = projects.filter(p => p.featured);
  const philosophy = window.ZEN_PHILOSOPHY;
  const awards = window.ZEN_AWARDS;
  const services = window.ZEN_SERVICES;

  // Hero rotation
  const heroImages = [
    'media/project-volante-penthouse-01.webp',
    'media/project-one-palm-residence-01.webp',
    'media/project-district-one-villa-01.webp',
    'media/project-volante-penthouse-02.webp',
  ];
  const heroLabels = [
    { name: 'Volante Penthouse', sector: 'Penthouse · Business Bay' },
    { name: 'One Palm Residence', sector: 'Apartment · Palm Jumeirah' },
    { name: 'District One Villa', sector: 'Villa · MBR City' },
    { name: 'Volante — Lounge', sector: 'Penthouse · Business Bay' },
  ];
  const [heroIdx, setHeroIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setHeroIdx(i => (i + 1) % heroImages.length), 5200);
    return () => clearInterval(t);
  }, []);

  return (
    <main className="fade-in" data-screen-label="Home">

      {/* HERO ---------------------------------------------------------- */}
      <section style={{ position: 'relative', minHeight: 'calc(100vh - 72px)', overflow: 'hidden', background: 'var(--linen)' }}>
        {heroImages.map((src, i) => (
          <img key={src} src={src} alt={heroLabels[i].name}
            style={{
              position: 'absolute', inset: 0, width: '100%', height: '100%',
              objectFit: 'cover',
              opacity: heroIdx === i ? 1 : 0,
              transition: 'opacity 1400ms ease',
            }} />
        ))}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(28,26,22,0.55) 0%, rgba(28,26,22,0.15) 30%, rgba(28,26,22,0.25) 55%, rgba(28,26,22,0.75) 100%)'
        }} />
        {/* subtle left-edge vignette to anchor the headline */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(90deg, rgba(28,26,22,0.4) 0%, rgba(28,26,22,0.15) 35%, rgba(28,26,22,0) 70%)',
          pointerEvents: 'none',
        }} />

        <div className="container" style={{
          position: 'relative', zIndex: 2,
          paddingTop: 'clamp(80px, 16vh, 200px)',
          paddingBottom: 80,
          color: 'var(--paper)',
          display: 'grid', gridTemplateColumns: '1fr',
        }}>
          <div className="eyebrow" style={{ color: 'rgba(250,247,242,0.85)' }}>Residential interior design · Dubai · since 2003</div>
          <h1 className="display" style={{
            fontSize: 'clamp(48px, 8.4vw, 132px)',
            lineHeight: 0.96, margin: '24px 0 24px', fontWeight: 300,
            maxWidth: '14ch', letterSpacing: '-0.015em',
          }}>
            Calm rooms,
            <br />
            <span className="display-italic" style={{ color: 'var(--linen)' }}>quietly delivered.</span>
          </h1>
          <p style={{
            maxWidth: 560, color: 'rgba(250,247,242,0.86)',
            fontSize: 'clamp(15px, 1.05vw, 18px)', lineHeight: 1.6,
            margin: 0,
          }}>
            We design and deliver serene, bespoke homes — concept to keys — for penthouses, apartments and villas in Dubai and beyond.
          </p>

          <div style={{ display: 'flex', gap: 14, marginTop: 36, flexWrap: 'wrap' }}>
            <button className="btn" onClick={openEnquiry}
              style={{ background: 'var(--paper)', color: 'var(--ink)', borderColor: 'var(--paper)' }}>
              Start your project <ArrowRight />
            </button>
            <a className="btn btn-ghost" href="#/projects" onClick={(e) => { e.preventDefault(); navigate('/projects'); }}
              style={{ color: 'var(--paper)', borderColor: 'rgba(250,247,242,0.5)' }}>
              View projects
            </a>
          </div>
        </div>

        {/* hero footer caption */}
        <div className="container" style={{
          position: 'absolute', left: 0, right: 0, bottom: 28,
          display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 24,
          color: 'var(--paper)', zIndex: 2, flexWrap: 'wrap'
        }}>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            {heroImages.map((_, i) => (
              <button key={i} onClick={() => setHeroIdx(i)}
                aria-label={`Slide ${i+1}`}
                style={{
                  width: 24, height: 1, background: heroIdx === i ? 'var(--paper)' : 'rgba(250,247,242,0.4)',
                  border: 0, padding: 0, cursor: 'pointer',
                  transition: 'background 240ms ease',
                }} />
            ))}
            <span style={{ marginLeft: 12, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em' }}>
              {String(heroIdx + 1).padStart(2,'0')} / {String(heroImages.length).padStart(2,'0')}
            </span>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div className="display-italic" style={{ fontSize: 20 }}>{heroLabels[heroIdx].name}</div>
            <div className="eyebrow" style={{ color: 'rgba(250,247,242,0.7)', marginTop: 4 }}>{heroLabels[heroIdx].sector}</div>
          </div>
        </div>
      </section>

      {/* INTRO STATEMENT ----------------------------------------------- */}
      <section className="container" style={{ paddingTop: 140, paddingBottom: 80 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 'clamp(40px, 8vw, 120px)' }}>
          <div className="eyebrow" style={{ paddingTop: 14 }}>
            01 — The studio
            <hr className="rule" style={{ marginTop: 14 }} />
          </div>
          <div>
            <p className="display" style={{ fontSize: 'clamp(28px, 3.4vw, 48px)', lineHeight: 1.15, margin: 0, fontWeight: 300, maxWidth: 22 + 'ch' }}>
              We are a Dubai studio of designers and project managers, founded in <span className="display-italic" style={{ color: 'var(--clay)' }}>2003 by Merete &amp; Patrick van IJzendoorn</span>. We make calm, considered homes — and then we deliver them, turnkey, to the day you walk in.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 32, marginTop: 56, paddingTop: 32, borderTop: '1px solid var(--line)' }}>
              {[
                { stat: 'Since 2003', label: 'Independent Dubai studio' },
                { stat: 'Turnkey', label: 'Concept to keys' },
                { stat: 'IPA winners', label: 'International Property Awards 2012 · 2013 · 2014' },
                { stat: 'EN · AR · RU · ZH', label: 'Working languages' },
              ].map((s, i) => (
                <div key={i}>
                  <div className="display" style={{ fontSize: 28, lineHeight: 1.1 }}>{s.stat}</div>
                  <div className="eyebrow" style={{ marginTop: 8 }}>{s.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* SELECTED PROJECTS --------------------------------------------- */}
      <section className="container" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <SectionHeader
          eyebrow="02 — Selected work"
          title="Recent"
          italicTail="projects."
          kicker="Penthouses, apartments and villas — each begun with a long conversation, drawn to the room, and delivered by a single studio team."
          link={<a href="#/projects" onClick={(e) => { e.preventDefault(); navigate('/projects'); }} className="btn-link">All projects <ArrowRight /></a>}
        />

        {/* Asymmetric editorial grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 'clamp(20px, 3vw, 40px)', rowGap: 80 }}>
          <div style={{ gridColumn: 'span 7' }}>
            <ProjectCard project={featured[0]} navigate={navigate} big />
          </div>
          <div style={{ gridColumn: 'span 5', alignSelf: 'end' }}>
            <ProjectCard project={featured[1]} navigate={navigate} />
          </div>
          <div style={{ gridColumn: 'span 5' }}>
            <ProjectCard project={featured[2]} navigate={navigate} />
          </div>
          <div style={{ gridColumn: 'span 7', alignSelf: 'start' }}>
            <ProjectCard project={featured[3]} navigate={navigate} big />
          </div>
        </div>
      </section>

      {/* HORIZONTAL PHILOSOPHY ----------------------------------------- */}
      <section style={{ background: 'var(--linen-soft)', paddingTop: 140, paddingBottom: 140, marginTop: 80 }}>
        <div className="container">
          <SectionHeader
            eyebrow="03 — Approach"
            title="Four words"
            italicTail="we live by."
            kicker="The studio holds itself to a short list. Calm rooms, considered plans, turnkey delivery, work that settles instead of dating."
          />

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 0, borderTop: '1px solid var(--line-strong)' }}>
            {philosophy.map((p, i) => (
              <div key={p.word} style={{
                padding: '40px 28px 32px',
                borderRight: i < philosophy.length - 1 ? '1px solid var(--line-strong)' : 'none',
              }}>
                <div className="eyebrow" style={{ color: 'var(--stone)' }}>0{i+1}</div>
                <h3 className="display" style={{ fontSize: 38, margin: '12px 0 16px', lineHeight: 1.1 }}>{p.word}</h3>
                <p style={{ color: 'var(--stone)', margin: 0 }}>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SECTORS STRIP -------------------------------------------------- */}
      <section className="container" style={{ paddingTop: 140, paddingBottom: 80 }}>
        <SectionHeader
          eyebrow="04 — Sectors"
          title="What we"
          italicTail="design for."
          link={<a href="#/sectors" onClick={(e) => { e.preventDefault(); navigate('/sectors'); }} className="btn-link">All sectors <ArrowRight /></a>}
        />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 32 }}>
          {[
            { key: 'penthouses', name: 'Penthouses', img: 'media/project-volante-penthouse-03.webp' },
            { key: 'apartments', name: 'Apartments', img: 'media/project-tiara-aquamarine-residence.webp' },
            { key: 'villas', name: 'Villas', img: 'media/project-wildflower-villa-01.webp' },
          ].map(s => (
            <a key={s.key} href={`#/sectors/${s.key}`} onClick={(e) => { e.preventDefault(); navigate(`/sectors/${s.key}`); }}
               style={{ display: 'block', cursor: 'pointer' }}>
              <div className="img-frame" style={{ aspectRatio: '4/5', marginBottom: 18 }}>
                <img src={s.img} alt={s.name} className="img-cover" />
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <h3 className="display" style={{ fontSize: 28, margin: 0 }}>{s.name}</h3>
                <span className="eyebrow"><ArrowRight /></span>
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* SERVICES ------------------------------------------------------- */}
      <section style={{ background: 'var(--ink)', color: 'var(--paper)', marginTop: 100, paddingTop: 140, paddingBottom: 140 }}>
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 32, marginBottom: 56, flexWrap: 'wrap' }}>
            <div style={{ maxWidth: 640 }}>
              <div className="eyebrow" style={{ color: 'var(--stone-soft)' }}>05 — Services</div>
              <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', margin: '14px 0 18px', lineHeight: 1.02, color: 'var(--paper)' }}>
                One studio, <span className="display-italic" style={{ color: 'var(--clay)' }}>concept to keys.</span>
              </h2>
              <p style={{ color: 'var(--linen)', maxWidth: 540 }}>
                Three service lines, often joined together on a single brief. We carry the project end-to-end so the design that arrives matches the design that was drawn.
              </p>
            </div>
            <a href="#/services" onClick={(e) => { e.preventDefault(); navigate('/services'); }}
              style={{ color: 'var(--paper)', borderColor: 'var(--linen)' }} className="btn-link">
              All services <ArrowRight />
            </a>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 0, borderTop: '1px solid var(--ink-soft)' }}>
            {services.map((s, i) => (
              <div key={s.key} style={{
                padding: '40px 28px',
                borderBottom: '1px solid var(--ink-soft)',
                borderRight: i < services.length - 1 ? '1px solid var(--ink-soft)' : 'none',
              }}>
                <div className="eyebrow" style={{ color: 'var(--stone-soft)' }}>0{i+1}</div>
                <h3 className="display" style={{ fontSize: 32, margin: '12px 0 12px', color: 'var(--paper)' }}>{s.name}</h3>
                <p style={{ color: 'var(--linen)', margin: 0 }}>{s.line}</p>
                <a href={`#/services`} onClick={(e) => { e.preventDefault(); navigate('/services'); }}
                  className="btn-link" style={{ color: 'var(--paper)', borderColor: 'var(--linen)', marginTop: 24 }}>
                  Read more <ArrowRight />
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* AWARDS + PRESS ------------------------------------------------- */}
      <section className="container" style={{ paddingTop: 140, paddingBottom: 60 }}>
        <SectionHeader
          eyebrow="06 — Recognition"
          title="International Property"
          italicTail="Awards."
          kicker="Attributed wins, with year, category and project. We carry the work, not the trophies; the wins are noted, not celebrated."
          link={<a href="#/awards" onClick={(e) => { e.preventDefault(); navigate('/awards'); }} className="btn-link">All awards <ArrowRight /></a>}
        />

        <div style={{ borderTop: '1px solid var(--line-strong)' }}>
          {awards.map((a, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '100px 1fr 1.4fr 1.6fr',
              padding: '28px 0', borderBottom: '1px solid var(--line)',
              alignItems: 'baseline', gap: 24,
            }}>
              <div className="display" style={{ fontSize: 32 }}>{a.year}</div>
              <div className="eyebrow">{a.body}</div>
              <div className="display-italic" style={{ fontSize: 20, color: 'var(--clay-deep)' }}>{a.category}</div>
              <div style={{ color: 'var(--ink)' }}>{a.project}</div>
            </div>
          ))}
        </div>
      </section>

      {/* PRESS STRIP --------------------------------------------------- */}
      <section style={{ overflow: 'hidden', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', marginTop: 60, padding: '36px 0' }}>
        <div style={{ display: 'flex', whiteSpace: 'nowrap', animation: 'drift 36s linear infinite', gap: 'clamp(60px, 8vw, 120px)' }}>
          {[...window.ZEN_PRESS, ...window.ZEN_PRESS, ...window.ZEN_PRESS].map((p, i) => (
            <span key={i} className="display" style={{ fontSize: 30, color: 'var(--stone)', flexShrink: 0 }}>
              <span className="display-italic" style={{ marginRight: 14, color: 'var(--clay)' }}>Featured in</span>
              {p}
            </span>
          ))}
        </div>
      </section>

      {/* CTA BAND ------------------------------------------------------ */}
      <section className="container" style={{ paddingTop: 140, paddingBottom: 60 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(40px, 8vw, 120px)', alignItems: 'center' }}>
          <div className="img-frame" style={{ aspectRatio: '4/5' }}>
            <img src="media/project-district-one-villa-02.webp" alt="" className="img-cover" />
          </div>
          <div>
            <div className="eyebrow">07 — Begin</div>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 5.4vw, 84px)', margin: '14px 0 28px', lineHeight: 1, fontWeight: 300 }}>
              Tell us about <span className="display-italic" style={{ color: 'var(--clay)' }}>your home.</span>
            </h2>
            <p style={{ color: 'var(--stone)', margin: '0 0 36px', maxWidth: 460 }}>
              We begin every project with a quiet, unhurried conversation — in person at our Al Barsha showroom, by video, or at the home itself. No fee, no pressure to commit.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <button className="btn" onClick={openEnquiry}>Request a consultation <ArrowRight /></button>
              <a className="btn btn-ghost" href={window.ZEN_CONTACT.phoneHref}>Call {window.ZEN_CONTACT.phone}</a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.HomePage = HomePage;