// Page Home — Immo&Sens

const { useState: useStateHome, useEffect: useEffectHome } = React;

/* ============ SECTION 1 — HERO ============ */
const Hero = ({ go }) => {
  const { IMG } = window.IMMO;
  return (
    <section className="hero">
      <div className="hero-bg">
        <img src={IMG.hero} alt="" />
      </div>

      {/* Logo + tagline centré */}
      <div className="hero-center">
        <img src="images/logo-png.png" alt="Immo&amp;Sens" className="hero-logo" />
        <p className="hero-tagline">Sublimer le potentiel immobilier</p>
      </div>

      {/* Accroche bas gauche */}
      <div className="hero-lede-wrap">
        <div className="shell">
          <p className="hero-lede-text">
            Immo&amp;Sens donne du sens au foncier<br />
            et accompagne la valorisation intelligente des territoires.
          </p>
        </div>
      </div>
    </section>
  );
};

/* ============ SECTION 2 — NOS MÉTIERS ============ */
const METIER_CARDS = [
  { id: 'conseil',     anchor: 'metier-conseil',     t: 'Valorisation foncière', alt: 'Valorisation foncière', d: "Conseil, Audit, Faisabilité, Montage d'opération", img: 'images/metier-valorisation.jpg' },
  { id: 'amenagement', anchor: 'metier-amenagement', t: 'Aménagement',            alt: 'Aménagement',            d: 'Division, Viabilisation, Voirie, Commercialisation',  img: 'images/metier-amenagement.jpg' },
  { id: 'programme',  anchor: 'metier-programme',   t: 'Programme neuf',         alt: 'Programme neuf',         d: 'Maison individuelle, Résidence, Petit collectif',      img: 'images/metier-programme.jpg' },
  { id: 'transaction', anchor: 'metier-transaction', t: 'Transaction',            alt: 'Transaction',            d: 'Estimation, Mandat de vente, Accompagnement',          img: 'images/metier-transaction-hd.png' },
];

const Metiers4 = ({ go }) => (
  <section className="metiers4-section">
    <div className="shell">
      <div className="metiers4-grid">
        {METIER_CARDS.map((m, i) => (
          <Reveal key={m.id} delay={i % 4 + 1}>
            <a className="metier4-card" onClick={() => go('metiers', m.anchor)} role="button" tabIndex={0}>
              <div className="metier4-img">
                <img src={m.img} alt={m.alt} loading="lazy" />
              </div>
              <div className="metier4-body">
                <div className="metier4-num">{String(i + 1).padStart(2, '0')}</div>
                <h3 className="metier4-title">{m.t}</h3>
                <div className="metier4-desc">{m.d}</div>
                <div className="metier4-arrow"><Arrow size={16} /></div>
              </div>
            </a>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

/* ============ SECTION 3 — VALEURS ============ */
const VALUES = [
  {
    t: 'Création de valeur',
    d: 'Transformer le potentiel en opportunité durable',
    svg: <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 48 L22 30 L32 40 L56 12" /><path d="M42 12 L56 12 L56 26" /></svg>,
  },
  {
    t: 'Densification intelligente',
    d: 'Valoriser sans dénaturer',
    svg: <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.2"><rect x="8" y="22" width="14" height="30" /><rect x="26" y="14" width="14" height="38" /><rect x="44" y="28" width="12" height="24" /><path d="M14 30h2M14 38h2M32 24h2M32 32h2M32 40h2" /></svg>,
  },
  {
    t: 'Qualité architecturale',
    d: "Privilégier l'esthétique et l'intégration",
    svg: <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M8 30L32 12l24 18" /><path d="M14 28v24h36V28" /><path d="M26 52V38h12v14" /></svg>,
  },
  {
    t: 'Approche sur-mesure',
    d: 'Des solutions adaptées à chaque territoire',
    svg: <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M44 8l12 12-32 32H12V40z" /><path d="M38 14l12 12" /><path d="M12 52l4-4" /></svg>,
  },
];

const Values = () => (
  <section className="values-section">
    <div className="shell">
      <Reveal>
        <div className="values-head">
          <Eyebrow solo>Notre vision</Eyebrow>
          <h2 className="display values-h2">
            <span className="line">Une approche <em>exigeante</em></span>
            <span className="line">du développement immobilier</span>
          </h2>
        </div>
      </Reveal>

      <div className="values-grid">
        {VALUES.map((v, i) => (
          <Reveal key={v.t} delay={i % 4 + 1}>
            <div className="value">
              <div className="value-icon">{v.svg}</div>
              <h3 className="value-title">{v.t}</h3>
              <div className="value-desc">{v.d}</div>
            </div>
          </Reveal>
        ))}
      </div>

      <Reveal>
        <div className="values-editorial">
          <p>
            Immo&amp;Sens accompagne la transformation des territoires à travers une <em>vision plus sensible
            et équilibrée</em> du développement immobilier.
          </p>
          <p>
            Une approche où la qualité des projets, le respect des territoires et les besoins des
            propriétaires priment sur une logique de développement standardisée.
          </p>
          <p>
            Parce que valoriser un territoire, c'est aussi préserver ce qui fait son identité et sa qualité.
          </p>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ============ SECTION 4 — À LA UNE ============ */
const FEATURED_IMAGES = [
  'images/alaune-1.jpg',
  'images/alaune-2.jpg',
  'images/alaune-3.jpg',
];

const ALaUne = ({ go }) => {
  const [idx, setIdx] = useStateHome(0);

  useEffectHome(() => {
    const id = setInterval(() => setIdx((i) => (i + 1) % FEATURED_IMAGES.length), 5500);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="alaune-section">
      <div className="shell">
        <Reveal><Eyebrow>À la une</Eyebrow></Reveal>
        <div className="alaune-grid">
          <Reveal>
            <div className="alaune-slider">
              {FEATURED_IMAGES.map((src, i) => (
                <img key={i} src={src} alt="" loading="lazy" className={i === idx ? 'active' : ''} />
              ))}
              <div className="alaune-dots">
                {FEATURED_IMAGES.map((_, i) => (
                  <button key={i} className={`alaune-dot${i === idx ? ' active' : ''}`} onClick={() => setIdx(i)} aria-label={`Image ${i + 1}`} />
                ))}
              </div>
              <div className="alaune-badge">Disponible</div>
            </div>
          </Reveal>

          <Reveal delay={1}>
            <div className="alaune-body">
              <div className="alaune-place">GOLFE DU MORBIHAN · SÉNÉ - QUARTIER CADOUARN</div>
              <h3 className="display alaune-title">Terrain constructible</h3>
              <p className="alaune-desc">
                Situation géographique idéale à 2 min du bourg de Séné et 300m des sentiers côtiers.
                Immo&amp;Sens vous propose ce terrain de 432 m², libre de constructeur. Viabilisation en cours.
              </p>
              <ul className="alaune-specs">
                <li><span>Localisation</span><strong>À 5 min de Vannes</strong></li>
                <li><span>Exposition</span><strong>Plein sud possible</strong></li>
                <li><span>Proximité</span><strong>Écoles &amp; commerces</strong></li>
                <li><span>Cadre</span><strong>Hors lotissement</strong></li>
              </ul>
              <button className="btn btn-primary" onClick={() => go('contact')}>
                Demander le dossier<Arrow />
              </button>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

/* ============ SECTION 5 — CTA FINAL ============ */
const CtaFinal = ({ go }) => (
  <section className="cta-final">
    <div className="shell">
      <Reveal>
        <div className="cta-final-card">
          <Eyebrow onInk solo style={{ marginBottom: 28 }}>Prochaine étape</Eyebrow>
          <h2 className="display on-ink cta-final-title">
            Révélez<br />le potentiel<br />de <em>votre propriété.</em>
          </h2>
          <p className="lede" style={{ color: 'rgba(255,255,255,0.78)', margin: '32px auto 0', maxWidth: '50ch' }}>
            Une approche sur-mesure pour valoriser durablement votre foncier.
          </p>
          <div style={{ marginTop: 48 }}>
            <button className="btn btn-gold" onClick={() => go('contact')}>
              Prendre contact<Arrow />
            </button>
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ============ HOME ============ */
const Home = ({ go }) => (
  <>
    <Hero go={go} />
    <Metiers4 go={go} />
    <Values />
    <ALaUne go={go} />
    <CtaFinal go={go} />
  </>
);

window.Home = Home;