/* global React */
const { Badge, Button } = window.DesignSystem_b1e064;
const TREE_CREAM_S = 'assets/logos/cuoccio-tree-cream.png';
const TREE_LEAF_S = 'assets/logos/cuoccio-tree-leaf.png';

function Filigree({ side = 'right', width = 'min(58vw, 640px)', opacity = 0.05 }) {
  return <img src={TREE_CREAM_S} alt="" aria-hidden="true" style={{
    position: 'absolute', top: '50%', transform: 'translateY(-50%)',
    [side]: 'clamp(-220px, -14vw, -80px)', width, opacity,
    pointerEvents: 'none', userSelect: 'none', zIndex: 0,
  }} />;
}

function Seal() {
  return (
    <div data-reveal style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 'var(--space-5)', padding: 'var(--space-7) var(--gutter) 0' }}>
      <span style={{ flex: 1, maxWidth: 200, height: 1, background: 'var(--border-soft)' }} />
      <img src={TREE_LEAF_S} 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 Story({ onShop }) {
  const timeline = [
    { y: '1937', t: 'Le radici', d: 'La famiglia Cuoccio comincia a prendersi cura degli ulivi di Bitonto, dapprima come operai agricoli.' },
    { y: '1955', t: 'Il primo terreno', d: 'Nonno Luigi acquista il primo terreno: un sogno coltivato con fatica e determinazione.' },
    { y: 'Oggi', t: 'Vito & Luigi', d: 'Padre e figlio ampliano gli uliveti e portano avanti l\'attività con impegno, sacrificio e rispetto per la natura.' },
  ];
  return (
    <div>
      {/* HEADER over imagery */}
      <div style={{
        position: 'relative', overflow: 'hidden', minHeight: '64vh', display: 'flex', alignItems: 'flex-end',
        padding: 'var(--section-y) var(--gutter)',
        background: 'linear-gradient(180deg, rgba(14,26,18,0.2), var(--forest-900)), linear-gradient(135deg, var(--terra-700), var(--forest-800))',
      }}>
        <Filigree side="right" width="min(66vw, 720px)" opacity={0.07} />
        <div style={{ maxWidth: 'var(--maxw-wide)', margin: '0 auto', width: '100%', position: 'relative', zIndex: 1 }}>
          <div className="cuoccio-eyebrow" data-reveal style={{ marginBottom: 18 }}>Chi siamo</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)',
          }}>Una storia<br /><span style={{ color: 'var(--leaf-500)' }}>di famiglia</span></h1>
        </div>
      </div>

      {/* INTRO */}
      <section style={{ padding: 'var(--section-y) var(--gutter)', background: 'var(--grad-section)' }}>
        <div style={{ maxWidth: 'var(--maxw-content)', margin: '0 auto' }}>
          <p data-reveal style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--text-h2)', lineHeight: 1.3, color: 'var(--cream-100)', letterSpacing: '-0.01em' }}>
            A Bitonto, capitale dell'olio, l'ulivo è il simbolo della città: da sempre rappresenta lavoro, identità e legame con il territorio.
          </p>
        </div>
      </section>

      {/* TIMELINE */}
      <section style={{ padding: '0 var(--gutter) var(--section-y)', background: 'var(--grad-section)' }}>
        <div style={{ maxWidth: 'var(--maxw-content)', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
          {timeline.map((e, i) => (
            <div data-reveal className="r2" key={i} style={{
              display: 'grid', gridTemplateColumns: '160px 1fr', gap: 'var(--space-6)',
              padding: 'var(--space-6) 0', borderTop: '1px solid var(--border-soft)',
            }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'var(--text-h2)', color: 'var(--accent)', lineHeight: 1 }}>{e.y}</div>
              <div>
                <h3 style={{ fontSize: 'var(--text-h3)', marginBottom: 10 }}>{e.t}</h3>
                <p style={{ fontSize: 'var(--text-base)', color: 'var(--text-secondary)', lineHeight: 1.7, maxWidth: 560, margin: 0 }}>{e.d}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* VALUES */}
      <Seal />
      <section style={{ position: 'relative', overflow: 'hidden', padding: 'var(--section-y) var(--gutter)', background: 'var(--grad-pit)' }}>
        <Filigree side="left" width="min(54vw, 600px)" opacity={0.045} />
        <div style={{ maxWidth: 'var(--maxw-wide)', margin: '0 auto', position: 'relative', zIndex: 1 }}>
          <h2 data-reveal style={{ fontSize: 'var(--text-h1)', textAlign: 'center', marginBottom: 'var(--space-8)' }}>
            Da una terra amata nascono <span style={{ color: 'var(--accent)' }}>frutti autentici</span>.
          </h2>
          <div className="r2" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--space-5)' }}>
            {[
              { t: 'Tenacia', d: 'Il lavoro paziente di tre generazioni, dal 1937 a oggi.' },
              { t: 'Territorio', d: 'Uliveti di proprietà a Bitonto, nel cuore della Puglia olearia.' },
              { t: 'Rispetto', d: 'Cura della natura e spremitura a freddo per un olio genuino.' },
            ].map((v) => (
              <div data-reveal key={v.t} style={{ padding: 'var(--space-6)', background: 'var(--surface)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-soft)' }}>
                <h3 style={{ fontSize: 'var(--text-h3)', color: 'var(--accent)', marginBottom: 10 }}>{v.t}</h3>
                <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-secondary)', lineHeight: 1.7, margin: 0 }}>{v.d}</p>
              </div>
            ))}
          </div>
          <div data-reveal style={{ textAlign: 'center', marginTop: 'var(--space-8)' }}>
            <Button variant="primary" size="lg" onClick={onShop}>Porta in tavola il nostro olio</Button>
          </div>
        </div>
      </section>
    </div>
  );
}

window.Story = Story;