/* WELT — Hero
 * Editorial split. Quality-first headline + spec strip that
 * substantiates the claim with real numbers.
 */

const HERO_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "quality"
}/*EDITMODE-END*/;

const HERO_VARIANTS = {
  quality: {
    eyebrow: 'WELT · Modelo FCO1040 · A Coruña',
    title: <>Acetato premium. Filtro certificado. <em>Diseño que no caduca.</em></>,
    lead: (
      <>
        Misma calidad de acetato que la óptica italiana — <strong>22 gramos</strong>,
        flexible, duradera. Filtro de luz azul medido en laboratorio independiente,
        no prometido por el fabricante. Exterior limpio, sin logos visibles.
      </>
    ),
  },
  europe: {
    eyebrow: 'Eyewear funcional · Hecho para pantallas',
    title: <>La óptica europea, <em>hecha gafa de pantalla.</em></>,
    lead: (
      <>
        Acetato premium negro, montura rectangular clásica y un filtro de luz azul
        <strong> certificado EN/ISO 12312-1:2015</strong>. La calidad de una óptica
        boutique, pensada para una jornada entera frente a pantallas.
      </>
    ),
  },
  refined: {
    eyebrow: 'WELT · Eyewear Premium Accesible',
    title: <>Gafas de óptica, <em>para vivir frente a pantallas.</em></>,
    lead: (
      <>
        Acetato auténtico, ligero y duradero. Filtro de luz azul <strong>certificado
        por laboratorio independiente</strong>. Diseño rectangular clásico que vale
        igual para una reunión, para casa y para la calle.
      </>
    ),
  },
};

function Hero() {
  const hasTweaks = typeof window !== 'undefined' && typeof window.useTweaks === 'function';
  const [tweaks, setTweak] = hasTweaks
    ? window.useTweaks(HERO_TWEAK_DEFAULTS)
    : [HERO_TWEAK_DEFAULTS, () => {}];
  const v = HERO_VARIANTS[tweaks.heroVariant] || HERO_VARIANTS.quality;

  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-grid">
          <div>
            <span className="eyebrow">{v.eyebrow}</span>
            <h1 className="display">{v.title}</h1>
            <p className="lead">{v.lead}</p>

            <dl className="hero-specs" aria-label="Ficha técnica WELT">
              <div className="spec">
                <span className="spec-val">Acetato</span>
                <span className="spec-label">Material</span>
              </div>
              <div className="spec">
                <span className="spec-val">22 g</span>
                <span className="spec-label">Peso</span>
              </div>
              <div className="spec">
                <span className="spec-val">EN/ISO 12312-1</span>
                <span className="spec-label">Certificado · CE</span>
              </div>
            </dl>

            <div className="actions">
              <a href="https://amazon.es" target="_blank" rel="noopener" className="btn">
                Comprar en Amazon <span className="arrow">→</span>
              </a>
              <div className="price-lockup">
                <span className="from">desde</span>
                <span className="price">32,99 €</span>
              </div>
            </div>
          </div>

          <div className="hero-image">
            <img src="assets/product/yellow-front.jpeg" alt="WELT FCO1040 lente día (amarilla) · vista frontal" />
            <span className="caption">FCO1040 · Lente día</span>
          </div>
        </div>
      </div>

      {hasTweaks && (
        <window.TweaksPanel title="Hero · Variantes">
          <window.TweakSection title="Titular">
            <window.TweakSelect
              label="Dirección de copy"
              value={tweaks.heroVariant}
              onChange={(val) => setTweak('heroVariant', val)}
              options={[
                { value: 'quality', label: 'Calidad primero' },
                { value: 'europe',  label: 'Óptica europea' },
                { value: 'refined', label: 'Gafas de óptica' },
              ]}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </section>
  );
}

window.Hero = Hero;