/* global React */
const { Badge, Button, Card, ProductCard } = window.DesignSystem_b1e064;

const BOTTLE = 'assets/images/cuoccio-bottle.jpg?v=6';
const TREE_CREAM = 'assets/logos/cuoccio-tree-cream.png';
const TREE_LEAF = 'assets/logos/cuoccio-tree-leaf.png';
const HERO_VIDEO = 'assets/video/hero.mp4?v=2';
const TERRITORIO = 'assets/images/territorio.jpg';

function Section({ children, style, watermark, wmSide = 'right' }) {
  return <section style={{ position: 'relative', overflow: 'hidden', padding: 'var(--section-y) var(--gutter)', ...style }}>
    {watermark && (
      <img src={TREE_CREAM} alt="" aria-hidden="true" style={{
        position: 'absolute', top: '50%', transform: 'translateY(-50%)',
        [wmSide]: 'clamp(-220px, -14vw, -80px)', width: 'min(58vw, 660px)',
        opacity: 0.05, pointerEvents: 'none', userSelect: 'none', zIndex: 0,
      }} />
    )}
    <div style={{ maxWidth: 'var(--maxw-wide)', margin: '0 auto', position: 'relative', zIndex: 1 }}>{children}</div>
  </section>;
}

/* Small tree mark used as a section divider / maker's seal. */
function Seal() {
  return (
    <div data-reveal style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 'var(--space-5)', padding: 'var(--space-7) var(--gutter)' }}>
      <span style={{ flex: 1, maxWidth: 200, height: 1, background: 'var(--border-soft)' }} />
      <img src={TREE_LEAF} alt="" aria-hidden="true" style={{ width: 46, height: 46, objectFit: 'contain', opacity: 0.9 }} />
      <span style={{ flex: 1, maxWidth: 200, height: 1, background: 'var(--border-soft)' }} />
    </div>
  );
}

function Stat({ value, label }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'var(--text-h3)', color: 'var(--accent)', lineHeight: 1, whiteSpace: 'nowrap' }}>{value}</div>
      <div style={{ fontSize: 'var(--text-xs)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-muted)', marginTop: 6 }}>{label}</div>
    </div>
  );
}

function Home({ onShop, onStory }) {
  return (
    <div>
      {/* HERO */}
      <div className="rhero" style={{
        position: 'relative', minHeight: '92vh',
        display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
        textAlign: 'center', padding: '120px var(--gutter) 80px',
        background: 'radial-gradient(120% 90% at 50% -10%, rgba(201,162,62,0.28) 0%, rgba(141,198,63,0.08) 26%, var(--forest-900) 58%, var(--forest-950) 100%)',
        overflow: 'hidden',
      }}>
        {/* Background video (fills the hero; gradient above stays as fallback if it can't load) */}
        <video src={HERO_VIDEO} autoPlay muted loop playsInline aria-hidden="true"
          disablePictureInPicture disableRemotePlayback tabIndex={-1}
          controlsList="nodownload nofullscreen noremoteplayback" style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover', zIndex: 0, pointerEvents: 'none',
        }} />
        {/* Overlay — kept as requested: brand tint + readability over the video */}
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
          background: 'radial-gradient(110% 85% at 50% -10%, rgba(201,162,62,0.28) 0%, rgba(141,198,63,0.07) 28%, transparent 58%), linear-gradient(to bottom, rgba(14,26,18,0.82) 0%, rgba(18,32,22,0.55) 20%, rgba(18,32,22,0.32) 48%, rgba(18,32,22,0.30) 72%, rgba(18,32,22,0.72) 90%, var(--forest-900) 100%)',
        }} />
        <img src={TREE_CREAM} alt="" aria-hidden="true" style={{
          position: 'absolute', top: '46%', left: '50%', transform: 'translate(-50%, -50%)',
          width: 'min(86vw, 820px)', opacity: 0.06, pointerEvents: 'none', userSelect: 'none', zIndex: 1,
        }} />
        <div className="cuoccio-eyebrow" data-reveal style={{ marginBottom: 22, position: 'relative', zIndex: 2 }}>Bitonto · Puglia · dal 1937</div>
        <h1 data-reveal style={{
          fontFamily: 'var(--font-display)', fontWeight: 900,
          fontSize: 'var(--text-hero)', lineHeight: 0.92, letterSpacing: '-0.02em',
          textTransform: 'uppercase', color: 'var(--cream-100)', margin: 0, position: 'relative', zIndex: 2,
        }}>Olio<br /><span style={{ color: 'var(--leaf-500)' }}>Tenace</span></h1>
        <p data-reveal className="cuoccio-lead" style={{ maxWidth: 540, marginTop: 26, color: 'var(--text-secondary)', position: 'relative', zIndex: 2 }}>
          Extra vergine 100% italiano, dagli uliveti di proprietà della famiglia Cuoccio.
          Spremitura a freddo, gusto equilibrato. La forza di una terra amata.
        </p>
        <div data-reveal style={{ display: 'flex', gap: 14, marginTop: 34, flexWrap: 'wrap', justifyContent: 'center', position: 'relative', zIndex: 2 }}>
          <Button variant="primary" size="lg" onClick={onShop}>Acquista l'olio</Button>
          <Button variant="secondary" size="lg" onClick={onStory} iconRight="→">La nostra storia</Button>
        </div>
        <div style={{ position: 'absolute', bottom: 26, left: '50%', transform: 'translateX(-50%)', color: 'var(--text-muted)', fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', zIndex: 2 }}>Scorri ↓</div>
      </div>

      {/* MANIFESTO */}
      <Section style={{ background: 'var(--grad-section)' }} watermark wmSide="left">
        <div className="r2" style={{ display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 'var(--space-9)', alignItems: 'start' }}>
          <h2 data-reveal style={{ fontSize: 'var(--text-display)', lineHeight: 1.05 }}>
            Il<br /><span style={{ color: 'var(--accent)' }}>Manifesto</span>
          </h2>
          <div data-reveal>
            <p style={{ fontSize: 'var(--text-h3)', lineHeight: 1.4, color: 'var(--cream-100)', fontFamily: 'var(--font-display)', fontWeight: 700, letterSpacing: '-0.01em', margin: 0 }}>
              Crediamo nel ritmo lento della terra. In un mondo ossessionato dalla fretta, scegliamo la pazienza dell'ulivo.
            </p>
            <div className="r2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-6)', marginTop: 'var(--space-7)' }}>
              <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-secondary)', lineHeight: 1.7 }}>
                Dal 1937 la famiglia Cuoccio si prende cura degli ulivi di Bitonto. Nel 1955 Nonno Luigi acquista il primo terreno: un sogno coltivato con fatica e determinazione.
              </p>
              <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-secondary)', lineHeight: 1.7 }}>
                Da queste radici nasce il nostro olio "Tenace": la forza della nostra famiglia, la conoscenza del territorio, la dedizione quotidiana con cui curiamo la terra.
              </p>
            </div>
            <div style={{ marginTop: 'var(--space-6)' }}>
              <Button variant="link" iconRight="→" onClick={onStory}>Leggi la nostra storia</Button>
            </div>
          </div>
        </div>
      </Section>

      {/* ORIGIN — split image + stats */}
      <Section style={{ paddingTop: 0 }}>
        <div className="r2" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 'var(--space-8)', alignItems: 'center' }}>
          <div data-reveal style={{
            aspectRatio: '4/3', borderRadius: 'var(--radius-xl)',
            background: 'linear-gradient(135deg, var(--terra-600), var(--forest-700) 70%)',
            position: 'relative', overflow: 'hidden', border: '1px solid var(--border-soft)',
          }}>
            <img src={TERRITORIO} alt="Il territorio degli uliveti Cuoccio a Bitonto" loading="lazy" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
            <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(14,26,18,0.45) 0%, transparent 38%)', pointerEvents: 'none' }} />
            <span style={{ position: 'absolute', bottom: 16, left: 18 }}><Badge variant="cream" size="sm">Uliveti secolari · Bitonto</Badge></span>
          </div>
          <div data-reveal>
            <div className="cuoccio-eyebrow" style={{ marginBottom: 14 }}>L'origine</div>
            <h2 style={{ fontSize: 'var(--text-h1)', lineHeight: 1.05 }}>Terra<br />& Pazienza</h2>
            <p style={{ fontSize: 'var(--text-base)', color: 'var(--text-secondary)', lineHeight: 1.7, marginTop: 'var(--space-4)' }}>
              Dove il sole della Puglia scalda la pietra calcarea, le radici dei nostri ulivi affondano in profondità. È questa lotta che dona all'olio il suo carattere fruttato ed equilibrato.
            </p>
            <div className="rwrap" style={{ display: 'flex', flexWrap: 'nowrap', gap: 'var(--space-6)', marginTop: 'var(--space-7)' }}>
              <Stat value="1937" label="Dalla prima raccolta" />
              <Stat value="100%" label="Italiano" />
              <Stat value="0,75–5 L" label="Formati" />
            </div>
          </div>
        </div>
      </Section>

      {/* THE GESTURE — 3 process cards */}
      <Section style={{ background: 'var(--grad-pit)' }} watermark wmSide="right">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 'var(--space-7)', gap: 'var(--space-6)', flexWrap: 'wrap' }}>
          <h2 data-reveal style={{ fontSize: 'var(--text-h1)' }}>Il Gesto</h2>
          <p style={{ maxWidth: 340, color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>Dal ramo alla bottiglia con rispetto. Spremitura a freddo per preservare ogni aroma.</p>
        </div>
        <div className="r2" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
          {[
            { n: '01', t: 'La Raccolta', d: 'Olive raccolte a mano al momento giusto, dagli uliveti di proprietà.', g: 'linear-gradient(160deg, var(--forest-600), var(--leaf-700))', img: 'assets/images/gesto-raccolta.jpg' },
            { n: '02', t: 'Spremitura a Freddo', d: 'Estrazione a freddo entro poche ore per trattenere polifenoli e profumi.', g: 'linear-gradient(160deg, var(--terra-600), var(--forest-700))', img: 'assets/images/gesto-freddo.jpg' },
            { n: '03', t: 'L\'Imbottigliamento', d: 'Conservato in vetro scuro e latta per proteggere il liquido dalla luce.', g: 'linear-gradient(160deg, #8C6E2A, var(--forest-800))', img: 'assets/images/gesto-imbottigliamento.jpg' },
          ].map((s) => (
            <div data-reveal key={s.n} style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--border-soft)' }}>
              <div style={{ aspectRatio: '4/3', background: s.g, position: 'relative', overflow: 'hidden' }}>
                <img src={s.img} alt={s.t} loading="lazy" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(14,26,18,0.45) 0%, transparent 42%)', pointerEvents: 'none' }} />
                <span style={{ position: 'absolute', top: 14, left: 16, fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 13, letterSpacing: '0.1em', color: 'var(--cream-100)', opacity: 0.95, textShadow: '0 1px 4px rgba(0,0,0,0.5)', zIndex: 1 }}>{s.n}</span>
              </div>
              <div style={{ padding: 'var(--space-5)', background: 'var(--surface)' }}>
                <h3 style={{ fontSize: 'var(--text-h4)', marginBottom: 8 }}>{s.t}</h3>
                <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-secondary)', lineHeight: 1.6, margin: 0 }}>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </Section>

      {/* FEATURED PRODUCT */}
      <Seal />
      <Section style={{ paddingTop: 0 }}>
        <div className="r2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-8)', alignItems: 'center' }}>
          <div data-reveal style={{ aspectRatio: '4/5', borderRadius: 'var(--radius-xl)', overflow: 'hidden', background: 'var(--grad-gold)' }}>
            <img src={BOTTLE} alt="Bottiglia Cuoccio" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center' }} />
          </div>
          <div data-reveal>
            <Badge variant="leaf" dot>Campagna 2025/2026</Badge>
            <h2 style={{ fontSize: 'var(--text-display)', lineHeight: 1, margin: '18px 0 6px' }}>Olio EVO<br /><span style={{ color: 'var(--accent)' }}>Tenace</span></h2>
            <p style={{ fontSize: 'var(--text-base)', color: 'var(--text-secondary)', lineHeight: 1.7, maxWidth: 440 }}>
              Note fruttate, gusto equilibrato e armonioso. Perfetto a crudo su pane, verdure e insalate, ottimo anche per esaltare i piatti caldi.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 26, flexWrap: 'wrap' }}>
              <Badge variant="terra">100% Italiano</Badge>
              <Badge variant="terra">Spremitura a freddo</Badge>
            </div>
            <div className="rwrap" style={{ display: 'flex', alignItems: 'center', gap: 20, marginTop: 30 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'var(--text-h1)', color: 'var(--cream-100)' }}>da 8,00 €</span>
              <Button variant="primary" size="lg" onClick={onShop}>Scopri i formati</Button>
            </div>
          </div>
        </div>
      </Section>
    </div>
  );
}

window.Home = Home;
window.HomeSection = Section;