// Home / Landing page
const { useState: useStateHome } = React;

function HomePage({ navigate }) {
  const featured = window.PROJECTS.find((p) => p.highlight) || window.PROJECTS[0];

  return (
    <main className="page-enter">
      {/* === HERO === */}
      <section className="hero">
        <div className="hero__meta-row">
          <div className="hero__location">Vienne (38), France · Architecte DPLG</div>
          <div className="hero__year">2026 / Index 24</div>
        </div>

        <h1 className="hero__title">
          <span style={{ fontStyle: 'italic' }}>«</span> C'est dans les utopies<br />
          d'<span className="word-italic">aujourd'hui</span> que sont<br />
          les solutions <span className="word-italic">de demain.</span> <span style={{ fontStyle: 'italic' }}>»</span>
        </h1>
        <div style={{
          marginTop: 24,
          marginBottom: 32,
          fontFamily: 'var(--serif)',
          fontStyle: 'italic',
          fontSize: 22,
          letterSpacing: '0.04em',
          color: 'var(--ink-soft)'
        }}>
          — Pierre Rabhi
        </div>

        <div className="hero__sub-row" style={{ fontFamily: "'Inter Display', 'Inter', system-ui, sans-serif" }}>
          <button className="hero__cta-link" onClick={() => navigate('contact')}>
            Parlons de votre projet
            <ArrowNE size={11} />
          </button>
          <p className="hero__lede" style={{ display: 'flex', flexDirection: 'column', gap: 10, textAlign: 'right', marginLeft: 'auto', alignItems: 'flex-end', gridColumn: '2 / 4' }}>
            <span style={{ textTransform: 'uppercase', letterSpacing: '0.18em', fontWeight: 600, color: 'var(--accent)', fontSize: "16px" }}>Donner vie à votre projet</span>
            <span style={{ fontStyle: 'italic', fontFamily: 'var(--serif)', color: 'var(--ink)', lineHeight: "1.55", opacity: "1", fontSize: "18px" }}>Nos valeurs, notre expérience, votre projet</span>
            <span style={{ fontSize: '14px', lineHeight: 1.55, color: 'var(--ink-soft)' }}>L’architecture a un rôle à jouer dans la préservation de l’environnement.</span>
          </p>
        </div>
      </section>

      {/* === HERO IMAGE === */}
      <section style={{ padding: '0 48px' }}>
        <Reveal className="hero__image-wrap">
          <div className="hero__image">
            <img src="assets/home-hero.jpg" alt="Chantier — charpente bois et grue sous ciel bleu" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', filter: 'grayscale(1)' }} />
            <div className="hero__image-strip">
              <span>Think Architecture</span>
              <div className="hero__image-strip-right">
                <span>Vienne (38)</span>
                <span>·</span>
                <span>depuis 2019</span>
              </div>
            </div>
          </div>
          <div className="hero__nav-row">
            <span>Projet précédent</span>
            <button onClick={() => navigate('projects')} style={{ cursor: 'pointer' }}>
              Tous les projets ↗
            </button>
          </div>
        </Reveal>
      </section>

      {/* === INTRO === */}
      <section className="section">
        <div className="container">
          <div className="intro">
            <Reveal as="h2" className="intro__big">
              L'agence conçoit des <span className="italic">bâtiments enracinés</span> dans leur territoire — au service du site, des usages et des <span className="italic">générations qui les habiteront. Une architecture réfléchie pour un habitat paisible.</span>
            </Reveal>
            <Reveal className="intro__side" delay={140}>
              <span className="section-tag">À propos de l'agence</span>
              <p className="intro__side-text" style={{ fontFamily: "'Inter Display', 'Inter', system-ui, sans-serif", fontSize: '16px' }}>L’architecture c’est avant tout une aventure… une envie, une idée, un projet, une rencontre, une synergie, un travail d’équipe avec des collaborateurs expérimentés (économiste, bureaux d’études, designers, paysagistes…), des moments d’échange et de partage pour répondre à vos attentes.

              </p>
              <div className="intro__side-img">
                <ArchPlaceholder seed="intro-side" tone="warm" />
              </div>
            </Reveal>
          </div>
          <div className="intro__bottom-row">
            <button className="text-link" onClick={() => navigate('about')}>
              En savoir plus sur nous
              <ArrowNE size={11} className="arrow" />
            </button>
            <span style={{ fontSize: 12, color: 'var(--ink-muted)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
              Agence · Vienne · fondée en 2014
            </span>
          </div>
        </div>
      </section>

      {/* === SERVICES === */}
      <section className="section section--alt" style={{ position: 'relative', overflow: 'hidden' }}>
        <FloorPlanBg opacity={0.08} />
        <div className="container" style={{ position: 'relative' }}>
          <div className="sec-head">
            <Reveal>
              <span className="section-tag" style={{ marginBottom: 20, display: 'inline-flex' }}>Services</span>
              <h2 className="sec-head__title">
                Six manières de travailler<br />
                avec le <span className="italic">lieu.</span>
              </h2>
            </Reveal>
            <Reveal className="sec-head__right" delay={120}>
              <button className="text-link" onClick={() => navigate('projects')}>
                Voir tous les projets
                <ArrowNE size={11} className="arrow" />
              </button>
              <div className="carousel-arrows">
                <button aria-label="Précédent"><ArrowLeft size={14} /></button>
                <button aria-label="Suivant"><ArrowRight size={14} /></button>
              </div>
            </Reveal>
          </div>

          <div className="services-grid">
            {window.SERVICES.map((s, i) =>
            <Reveal key={s.num} className="service-card" delay={i * 60}>
                <div className="service-card__num">— {s.num}</div>
                <h3 className="service-card__title">
                  {s.title.replace(s.titleItalic, '')}
                  <span style={{ fontStyle: 'italic' }}>{s.titleItalic}</span>
                </h3>
                <p className="service-card__desc">{s.desc}</p>
                <div className="service-card__arrow">
                  <ArrowNE size={14} />
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      {/* === INSIGHT / BANNER === */}
      <section style={{ padding: 0 }}>
        <div className="banner" style={{ minHeight: 600 }}>
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(155deg, #2e1b0c 0%, #4a2f1a 45%, #3c240f 100%)', overflow: 'hidden' }}>
            <svg width="100%" height="100%" viewBox="0 0 1600 600" preserveAspectRatio="xMidYMid slice"
            style={{ position: 'absolute', inset: 0 }} aria-hidden="true">
              <defs>
                <linearGradient id="bnr-line" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#e4dcd5" stopOpacity="0.0" />
                  <stop offset="50%" stopColor="#e4dcd5" stopOpacity="0.22" />
                  <stop offset="100%" stopColor="#e4dcd5" stopOpacity="0.0" />
                </linearGradient>
                <radialGradient id="bnr-glow" cx="50%" cy="42%" r="60%">
                  <stop offset="0%" stopColor="#c98a5a" stopOpacity="0.28" />
                  <stop offset="100%" stopColor="#c98a5a" stopOpacity="0" />
                </radialGradient>
              </defs>
              {/* soft central glow */}
              <rect width="1600" height="600" fill="url(#bnr-glow)" />
              {/* perspective converging lines to a vanishing point */}
              <g stroke="#e4dcd5" strokeWidth="1" opacity="0.13" fill="none">
                {[-700, -520, -360, -220, -100, 100, 220, 360, 520, 700].map((dx, i) =>
                <line key={i} x1={800 + dx} y1="600" x2="800" y2="150" />
                )}
              </g>
              {/* concentric arcs around vanishing point */}
              <g stroke="#e4dcd5" strokeWidth="1.1" opacity="0.16" fill="none">
                {[120, 230, 340, 450, 560].map((r, i) =>
                <path key={i} d={`M ${800 - r} 320 A ${r} ${r} 0 0 1 ${800 + r} 320`} />
                )}
              </g>
              {/* fine measurement grid baseline */}
              <g stroke="#e4dcd5" strokeWidth="1" opacity="0.10">
                <line x1="0" y1="470" x2="1600" y2="470" />
                {Array.from({ length: 33 }).map((_, i) =>
                <line key={i} x1={i * 50} y1="464" x2={i * 50} y2="476" />
                )}
              </g>
              {/* accent verticals with gradient fade */}
              <g>
                <rect x="520" y="0" width="2" height="600" fill="url(#bnr-line)" />
                <rect x="800" y="0" width="2" height="600" fill="url(#bnr-line)" />
                <rect x="1080" y="0" width="2" height="600" fill="url(#bnr-line)" />
              </g>
              {/* small accent nodes */}
              <g fill="#da734a" opacity="0.55">
                <circle cx="800" cy="150" r="3.5" />
                <circle cx="520" cy="470" r="2.5" />
                <circle cx="1080" cy="470" r="2.5" />
              </g>
            </svg>
          </div>
          <div className="banner__inner">
            <Reveal as="div" className="banner__tag">— réflexion</Reveal>
            <Reveal as="h2" className="banner__title" delay={100}>
              « À tous ceux qui imaginent<br />
              ce qui n'existe pas encore <span style={{ fontStyle: 'italic' }}>et qui trouvent le courage</span><br />
              d'en faire <span style={{ fontStyle: 'italic' }}>une réalité. »</span>
            </Reveal>
          </div>
        </div>
      </section>

      {/* === FEATURED PROJECTS === */}
      <section className="section">
        <div className="container">
          <div className="sec-head">
            <Reveal>
              <span className="section-tag" style={{ marginBottom: 20, display: 'inline-flex' }}>Projets sélectionnés</span>
              <h2 className="sec-head__title">
                Pièces, refuges<br />
                et <span className="italic">espaces publics.</span>
              </h2>
            </Reveal>
            <Reveal className="sec-head__right" delay={120}>
              <button className="text-link" onClick={() => navigate('projects')}>
                Voir tous les projets
                <ArrowNE size={11} className="arrow" />
              </button>
            </Reveal>
          </div>

          <div className="projects-grid">
            {window.PROJECTS.slice(0, 4).map((p, i) =>
            <Reveal key={p.id} className="project-card" delay={i * 80} onClick={() => navigate('project-detail', p.id)}>
                <div className="project-card__media">
                  <div className="project-card__media-inner">
                    {p.cover ?
                  <img src={p.cover} alt={p.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} /> :
                  <ArchPlaceholder seed={p.id} tone="warm" label={p.title} />}
                  </div>
                  <span className="project-card__badge">{p.sectorLabel}</span>
                  <div className="project-card__hover-cta"><ArrowNE size={14} /></div>
                </div>
                <div className="project-card__info">
                  <h3 className="project-card__title">
                    {p.title.replace(p.italic, '')}
                    <span className="italic">{p.italic}</span>
                  </h3>
                  <div className="project-card__meta">
                    <span className="project-card__meta-loc">{p.location}</span>
                    <span className="project-card__meta-year">{p.year}</span>
                  </div>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      {/* === SPEC / STATS === */}
      <section className="section section--alt">
        <div className="container">
          <div className="spec">
            <Reveal className="spec__image">
              <div className="spec-logo-frame">
                <img src="assets/logo-mark-only.png" alt="Think Architecture" className="spec-logo-frame__mark" />
                <span className="spec-logo-frame__caption">
                  <svg className="spec-logo-frame__flowericon" viewBox="0 0 100 100" aria-hidden="true">
                    {Array.from({ length: 16 }).map((_, i) => {
                      const a = i * 360 / 16 * Math.PI / 180;
                      return (
                        <line key={i}
                        x1={50 + Math.cos(a) * 16} y1={50 + Math.sin(a) * 16}
                        x2={50 + Math.cos(a) * 44} y2={50 + Math.sin(a) * 44}
                        stroke="var(--accent)" strokeWidth="3" strokeLinecap="round" />);

                    })}
                  </svg>
                  Vienne · depuis 2019
                </span>
              </div>
            </Reveal>
            <Reveal className="spec__content" delay={120}>
              <span className="section-tag" style={{ marginBottom: 18, display: 'inline-flex' }}>EXPÉRIENCES / MISSIONS</span>
              <h2 className="spec__title">
                Une agence Sérieuse<br />
                qui a su <span className="italic">grandir</span>, avec<br />
                une équipe compétente.
              </h2>
              <dl className="spec__table">
                <div className="spec__row">
                  <dt>Agence fondée</dt>
                  <dd>à Vienne (38), en 2019</dd>
                </div>
                <div className="spec__row">
                  <dt>Projets concernés</dt>
                  <dd>Habitation, public, médical, tertiaire</dd>
                </div>
                <div className="spec__row">
                  <dt>Missions</dt>
                  <dd style={{ textAlign: "right" }}>Conception : Etude de faisabilité, ESQ, PC, DP, APS, APD
Phase travaux : DCE,ACT, EXE, DET, OPC, AOR reception
                  </dd>
                </div>
                <div className="spec__row">
                  <dt>Taille de l'agence</dt>
                  <dd style={{ textAlign: "right" }}>2 architectes · 2 secrétaires indépendantes, dessinateurs et OPC indépendants

                  </dd>
                </div>
                <div className="spec__row">
                  <dt>Equipe de maîtrise d'œuvre</dt>
                  <dd>plus de 15 ans d'expérience</dd>
                </div>
                <div className="spec__row">
                  <dt>Phase de conception moyenne</dt>
                  <dd>2 mois entre l'esquisse et le permis</dd>
                </div>
                <div className="spec__row">
                  <dt>Liens utiles</dt>
                  <dd>ordre des architectes :
https://www.architectes.org/un-architecte-pourquoi-comment-91442</dd>
                </div>
              </dl>
            </Reveal>
          </div>
        </div>
      </section>

      <PartnersStrip />

      <ThinkPhilosophy />

      <ClosingCTA navigate={navigate} />
    </main>);
}

window.HomePage = HomePage;