// landing.jsx — Fun Pizza landing page
const { useState, useEffect, useRef } = React;

function Marquee({ items }) {
  return (
    <div className="fp-marquee" aria-hidden="true">
      <div className="fp-marquee-track">
        {[...items, ...items, ...items].map((it, i) => (
          <span key={i} className="fp-marquee-item">
            {it}<span className="fp-marquee-dot">✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function HeroA() {
  return (
    <section className="fp-hero fp-hero--a">
      <div className="fp-hero__grid">
        <div className="fp-hero__copy">
          <span className="fp-eyebrow">Pizzeria · St-Gingolph · depuis 2019</span>
          <h1 className="fp-hero__title">
            Le feu<br/>
            <em>dans ta</em><br/>
            <span className="fp-hero__title-accent">boîte.</span>
          </h1>
          <p className="fp-hero__lede">
            22 pizzas artisanales, pâte fraîche au levain, ingrédients du coin.
            Cuisson au four à pierre, livrées chaudes ou à emporter en 15 minutes.
          </p>
          <div className="fp-hero__cta">
            <button className="fp-btn fp-btn--primary" onClick={() => window.fpGo('menu')}>
              Voir la carte
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </button>
            <a className="fp-btn fp-btn--ghost" href="tel:+33613851153">
              06 13 85 11 53
            </a>
          </div>
          <div className="fp-hero__meta">
            <div><b>Ouvert</b><span>11h30 → 14h · 17h30 → 22h30</span></div>
            <div><b>Adresse</b><span>17 rue Nationale, 74500</span></div>
            <div><b>Livraison</b><span>Gratuite dès 20€</span></div>
          </div>
        </div>

        <div className="fp-hero__art">
          <div className="fp-hero__plate">
            <div className="fp-hero__stamp fp-hero__stamp--1">
              <span>n°</span><b>14</b><span>signature</span>
            </div>
            <div className="fp-hero__stamp fp-hero__stamp--2">
              <span>cuit en</span><b>4'</b><span>à 380°c</span>
            </div>
            <image-slot
              id="fp-hero-pizza"
              shape="circle"
              placeholder="Photo pizza vue du dessus, fond clair"
              style={{width:'100%', height:'100%'}}
            ></image-slot>
          </div>
          <div className="fp-hero__price-tag">
            <span className="fp-hero__price-tag-from">à partir de</span>
            <b>12,50€</b>
            <span className="fp-hero__price-tag-name">la Margherita</span>
          </div>
        </div>
      </div>

      <Marquee items={[
        "Pâte au levain", "Four à pierre", "Produits locaux", "Livraison 20€+",
        "À emporter en 15'", "06 13 85 11 53", "St-Gingolph 74500"
      ]} />
    </section>
  );
}

function HeroB() {
  return (
    <section className="fp-hero fp-hero--b">
      <div className="fp-hero-b__shout">
        <span className="fp-eyebrow fp-eyebrow--inverse">FUN PIZZA · St-Gingolph</span>
        <h1 className="fp-hero-b__title">
          <span>une</span> pizza
          <span>,</span> deux pieds
          <span>,</span> quinze
          <span>minutes</span>
          <em>chrono.</em>
        </h1>
        <div className="fp-hero-b__row">
          <button className="fp-btn fp-btn--primary fp-btn--lg" onClick={() => window.fpGo('menu')}>
            Commander en ligne
          </button>
          <span className="fp-hero-b__or">ou</span>
          <a className="fp-link" href="tel:+33613851153">06 13 85 11 53 →</a>
        </div>
      </div>
      <Marquee items={[
        "22 pizzas", "Pâte au levain", "Four à pierre", "Produits locaux",
        "Livraison gratuite 20€+", "À emporter en 15'", "St-Gingolph 74500"
      ]} />
    </section>
  );
}

function FeaturedStrip({ onAdd }) {
  const list = window.featured || [];
  return (
    <section className="fp-section">
      <header className="fp-section__hd">
        <span className="fp-eyebrow">Les chouchous de la maison</span>
        <h2 className="fp-section__title">Trois <em>incontournables</em> pour commencer.</h2>
        <button className="fp-link fp-link--lg" onClick={() => window.fpGo('menu')}>
          Voir les 22 pizzas →
        </button>
      </header>

      <div className="fp-feat">
        {list.map((p, i) => (
          <article key={p.id} className="fp-feat__card" style={{'--i': i}}>
            <div className="fp-feat__num">N°{String(p.id).padStart(2,'0')}</div>
            <div className="fp-feat__media">
              <image-slot
                id={`fp-feat-${p.id}`}
                shape="rounded"
                radius="14"
                placeholder={`Photo ${p.name}`}
                style={{width:'100%', height:'100%'}}
              ></image-slot>
              <span className="fp-feat__price">{p.price.toFixed(2).replace('.', ',')}€</span>
            </div>
            <div className="fp-feat__body">
              <h3 className="fp-feat__name">{p.name}</h3>
              <p className="fp-feat__desc"><em>{p.desc}</em></p>
              <ul className="fp-feat__ings">
                {p.ingredients.slice(0,5).map((ing, k) => <li key={k}>{ing}</li>)}
              </ul>
              <button className="fp-btn fp-btn--dark fp-btn--full" onClick={() => onAdd(p)}>
                Ajouter <span>·</span> {p.price.toFixed(2).replace('.', ',')}€
              </button>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function ServiceBlocks() {
  const status = window.fpDeliveryStatus || 'available';
  const paused = status !== 'available';
  const isComingSoon = status === 'comingsoon';
  return (
    <section className={`fp-section fp-services ${paused ? 'fp-services--paused' : ''}`}>
      <div className={`fp-svc fp-svc--delivery ${paused ? 'fp-svc--off' : ''}`}>
        <div className="fp-svc__num">01</div>
        <div className="fp-svc__copy">
          <span className="fp-eyebrow fp-eyebrow--inverse">Livraison</span>
          <h3>{paused ? (isComingSoon ? 'Bientôt à ta porte.' : 'En pause aujourd\'hui.') : 'Chaude, à ta porte.'}</h3>
          <p>{paused
            ? (isComingSoon
                ? 'On finalise la mise en place du service livraison — encore quelques jours de patience.'
                : 'Pas de livreur ce soir. Tu peux passer la chercher en magasin, prête en 15 minutes.')
            : 'Gratuite dès 20€ — 5 à 7 km autour de St-Gingolph. Préparée et livrée en 30 à 45 minutes.'}</p>
          <button
            className="fp-btn fp-btn--ghost-inv"
            onClick={() => !paused && window.fpGo('menu')}
            disabled={paused}
            aria-disabled={paused}
          >
            {paused ? (isComingSoon ? 'Bientôt disponible' : 'Indisponible aujourd\'hui') : 'Lancer une commande →'}
          </button>
        </div>
        <div className="fp-svc__art" aria-hidden="true">
          <svg viewBox="0 0 200 200"><circle cx="100" cy="100" r="90" fill="none" stroke="currentColor" strokeWidth="2"/><circle cx="100" cy="100" r="60" fill="none" stroke="currentColor" strokeWidth="2"/></svg>
        </div>
        {paused && (
          <div className="fp-svc__stamp" aria-hidden="true">
            <span>{isComingSoon ? 'Bientôt' : 'En pause'}</span>
          </div>
        )}
      </div>

      <div className={`fp-svc fp-svc--takeaway ${paused ? 'fp-svc--hero' : ''}`}>
        <div className="fp-svc__num">02</div>
        <div className="fp-svc__copy">
          <span className="fp-eyebrow">{paused ? 'À emporter — recommandé' : 'À emporter'}</span>
          <h3>Prête en 15 minutes.</h3>
          <p>Tu commandes, tu viens. La pizza t'attend dans sa boîte, encore fumante.</p>
          <button className="fp-btn fp-btn--dark" onClick={() => window.fpGo('menu')}>
            Choisir une pizza →
          </button>
        </div>
        <div className="fp-svc__art" aria-hidden="true">
          <div className="fp-svc__box"><span>15<em>min</em></span></div>
        </div>
      </div>
    </section>
  );
}

function StoryBlock() {
  return (
    <section className="fp-section fp-story">
      <div className="fp-story__col fp-story__col--lead">
        <span className="fp-eyebrow">La maison</span>
        <h2 className="fp-story__title">Une <em>vraie</em> pizzeria de quartier, pas une chaîne.</h2>
      </div>
      <div className="fp-story__col fp-story__col--body">
        <p className="fp-story__p">
          Fun Pizza, c'est une équipe de quatre, un four à pierre, une farine
          italienne, une pâte qu'on laisse reposer 48 heures. Et trois bases : tomate
          San Marzano, crème fraîche, ou ce que tu veux dans une calzone.
        </p>
        <div className="fp-story__stats">
          <div><b>22</b><span>pizzas à la carte</span></div>
          <div><b>48h</b><span>de fermentation</span></div>
          <div><b>380°</b><span>au four à pierre</span></div>
          <div><b>2019</b><span>première fournée</span></div>
        </div>
      </div>
    </section>
  );
}

function InfoFooter() {
  return (
    <section className="fp-section fp-info">
      <h2 className="fp-info__title">Passer<br/>nous voir.</h2>
      <div className="fp-info__grid">
        <div>
          <span className="fp-eyebrow">Horaires</span>
          <p><b>Lundi → Dimanche</b><br/>11h30 — 14h00<br/>17h30 — 22h30</p>
        </div>
        <div>
          <span className="fp-eyebrow">Adresse</span>
          <p><b>17 rue Nationale</b><br/>74500 St-Gingolph<br/>France</p>
        </div>
        <div>
          <span className="fp-eyebrow">Téléphone</span>
          <p><a href="tel:+33613851153"><b>06 13 85 11 53</b></a><br/>Pour commander, demander, papoter.</p>
        </div>
        <div>
          <span className="fp-eyebrow">Parking</span>
          <p><b>Parking Centre</b><br/>Parking Public<br/>Gratuits, à 1 minute à pied.</p>
        </div>
      </div>
      <div className="fp-info__sign">
        <span>Fun Pizza —</span>
        <em>le feu dans ta boîte.</em>
      </div>
    </section>
  );
}

function Landing({ onAdd }) {
  const [heroVariant, setHeroVariant] = [
    window.fpHeroVariant || 'a',
    () => {}
  ];
  return (
    <main className="fp-landing">
      {window.fpHeroVariant === 'b' ? <HeroB/> : <HeroA/>}
      <FeaturedStrip onAdd={onAdd} />
      <ServiceBlocks />
      <StoryBlock />
      <InfoFooter />
    </main>
  );
}

window.Landing = Landing;