/* global React */
const { Badge, Button, Select } = window.DesignSystem_b1e064;
const BOTTLE_P = 'assets/images/cuoccio-bottle.jpg';
const TREE_CREAM_P = 'assets/logos/cuoccio-tree-cream.png';
const TREE_LEAF_P = 'assets/logos/cuoccio-tree-leaf.png';

function FiligreeP({ side = 'right', width = 'min(56vw, 620px)', opacity = 0.05 }) {
  return <img src={TREE_CREAM_P} 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 SealP() {
  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_P} 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>
  );
}

const FORMATS = [
  { id: '5l', label: 'Lattina 5 L', price: '60,00 €' },
  { id: '3l', label: 'Lattina 3 L', price: '35,00 €' },
  { id: '075', label: 'Bottiglia 0,75 L', price: '15,00 €' },
  { id: '025', label: 'Bottiglia 0,25 L', price: '8,00 €' },
];

function Product({ onAdd }) {
  const [fmt, setFmt] = React.useState('5l');
  const [qty, setQty] = React.useState(1);
  const current = FORMATS.find((f) => f.id === fmt);

  return (
    <div>
      {/* HERO product */}
      <section style={{ padding: 'calc(var(--section-y-tight) + 40px) var(--gutter) var(--section-y-tight)' }}>
        <div className="r2" style={{ maxWidth: 'var(--maxw-wide)', margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-8)', alignItems: 'start' }}>
          {/* Image */}
          <div data-reveal style={{ aspectRatio: '4/5', borderRadius: 'var(--radius-xl)', overflow: 'hidden', background: 'var(--grad-gold)' }}>
            <img src={BOTTLE_P} alt="Olio EVO Cuoccio" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          {/* Buy panel */}
          <div data-reveal className="rsticky" style={{ position: 'sticky', top: 100 }}>
            <Badge variant="leaf" dot>Campagna 2025/2026</Badge>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'var(--text-display)', lineHeight: 1, margin: '18px 0 8px', textTransform: 'uppercase' }}>
              Olio EVO<br /><span style={{ color: 'var(--accent)' }}>Tenace</span>
            </h1>
            <p style={{ fontSize: 'var(--text-base)', color: 'var(--text-secondary)', lineHeight: 1.7, maxWidth: 460 }}>
              Extra vergine di oliva 100% italiano, da uliveti di proprietà. Profumo fresco, note fruttate, gusto equilibrato e armonioso.
            </p>

            <div style={{ display: 'flex', gap: 10, margin: '22px 0', flexWrap: 'wrap' }}>
              <Badge variant="terra">100% Italiano</Badge>
              <Badge variant="terra">Spremitura a freddo</Badge>
              <Badge variant="terra">Uliveti di proprietà</Badge>
            </div>

            <div style={{ borderTop: '1px solid var(--border-soft)', paddingTop: 'var(--space-5)', display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
              {/* Format pills */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <span style={{ fontSize: 'var(--text-sm)', fontWeight: 600, color: 'var(--text-secondary)' }}>Formato</span>
                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                  {FORMATS.map((f) => {
                    const active = f.id === fmt;
                    return (
                      <button key={f.id} onClick={() => setFmt(f.id)} style={{
                        display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 2,
                        padding: '12px 18px', cursor: 'pointer',
                        borderRadius: 'var(--radius-md)',
                        border: `1.5px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
                        background: active ? 'var(--accent-soft)' : 'transparent',
                        transition: 'all var(--dur-fast) var(--ease-out)',
                      }}>
                        <span style={{ fontSize: 'var(--text-sm)', fontWeight: 700, color: active ? 'var(--accent)' : 'var(--text-primary)' }}>{f.label}</span>
                        <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>{f.price}</span>
                      </button>
                    );
                  })}
                </div>
              </div>

              {/* Qty + price */}
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-4)', marginTop: 6 }}>
                <div style={{ display: 'flex', alignItems: 'center', border: '1.5px solid var(--border)', borderRadius: 'var(--radius-pill)', overflow: 'hidden' }}>
                  <button onClick={() => setQty((q) => Math.max(1, q - 1))} style={qtyBtn}>−</button>
                  <span style={{ minWidth: 36, textAlign: 'center', fontWeight: 700 }}>{qty}</span>
                  <button onClick={() => setQty((q) => q + 1)} style={qtyBtn}>+</button>
                </div>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'var(--text-h1)', color: 'var(--cream-100)' }}>{current.price}</span>
              </div>

              <Button variant="primary" size="lg" fullWidth onClick={() => onAdd && onAdd({ ...current, qty })}>
                Aggiungi al carrello — {current.price}
              </Button>
              <p style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', textAlign: 'center', margin: 0 }}>
                Spedizione gratuita sopra i 60&nbsp;€ · Imballaggio eco-sostenibile
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* MANIFESTO split */}
      <section style={{ position: 'relative', overflow: 'hidden', padding: 'var(--section-y) var(--gutter)', background: 'var(--grad-pit)' }}>
        <FiligreeP side="left" width="min(52vw, 580px)" opacity={0.045} />
        <div className="r2" style={{ maxWidth: 'var(--maxw-wide)', margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-8)', alignItems: 'center', position: 'relative', zIndex: 1 }}>
          <div data-reveal>
            <h2 style={{ fontSize: 'var(--text-display)', lineHeight: 1.02, textTransform: 'uppercase' }}>
              Nato dalla<br /><span style={{ color: 'var(--accent)' }}>terra di Puglia</span>
            </h2>
            <p style={{ fontSize: 'var(--text-base)', color: 'var(--text-secondary)', lineHeight: 1.7, marginTop: 'var(--space-5)', maxWidth: 460 }}>
              Le nostre radici affondano nella roccia calcarea. La fatica delle olive concentra i profumi: ne nasce un olio vivo, dalle note fruttate.
            </p>
            <p style={{ fontSize: 'var(--text-base)', color: 'var(--text-secondary)', lineHeight: 1.7, marginTop: 'var(--space-4)', maxWidth: 460 }}>
              Spremitura a freddo per preservare aromi e polifenoli, esaltando i sapori senza coprirli.
            </p>
          </div>
          <div data-reveal style={{ aspectRatio: '1/1', borderRadius: 'var(--radius-xl)', background: 'linear-gradient(135deg, var(--terra-600), var(--forest-700))', position: 'relative', overflow: 'hidden', border: '1px solid var(--border-soft)' }}>
            <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(70% 60% at 70% 25%, rgba(201,162,62,0.4), transparent 60%)' }} />
            <span style={{ position: 'absolute', bottom: 16, left: 18 }}><Badge variant="cream" size="sm">Bitonto, Puglia</Badge></span>
          </div>
        </div>
      </section>

      {/* SENSORY PROFILE */}
      <SealP />
      <section style={{ position: 'relative', overflow: 'hidden', padding: 'var(--section-y) var(--gutter)' }}>
        <FiligreeP side="right" width="min(50vw, 560px)" opacity={0.05} />
        <div style={{ maxWidth: 'var(--maxw-wide)', margin: '0 auto', position: 'relative', zIndex: 1 }}>
          <div className="cuoccio-eyebrow" data-reveal style={{ textAlign: 'center', marginBottom: 12 }}>Profilo sensoriale</div>
          <h2 data-reveal style={{ fontSize: 'var(--text-display)', textAlign: 'center', textTransform: 'uppercase', marginBottom: 'var(--space-8)' }}>
            Fresco. Fruttato. <span style={{ color: 'var(--accent)' }}>Equilibrato.</span>
          </h2>
          <div className="r2" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--space-5)' }}>
            {[
              { t: 'Fruttato', d: 'Note fresche di oliva appena raccolta, pulite e vive.' },
              { t: 'Armonioso', d: 'Amaro e piccante in equilibrio, mai aggressivo al palato.' },
              { t: 'Versatile', d: 'A crudo su pane e verdure, perfetto anche nei piatti caldi.' },
            ].map((s) => (
              <div data-reveal key={s.t} style={{ padding: 'var(--space-6)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-soft)', background: 'var(--surface)' }}>
                <h3 style={{ fontSize: 'var(--text-h3)', marginBottom: 10 }}>{s.t}</h3>
                <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-secondary)', lineHeight: 1.7, margin: 0 }}>{s.d}</p>
              </div>
            ))}
          </div>
          <div data-reveal className="rwrap" style={{ display: 'flex', justifyContent: 'center', gap: 'var(--space-9)', marginTop: 'var(--space-8)' }}>
            {[['100%', 'Italiano'], ['A freddo', 'Spremitura'], ['2025/26', 'Campagna']].map(([v, l]) => (
              <div key={l} style={{ textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'var(--text-h2)', color: 'var(--cream-100)' }}>{v}</div>
                <div style={{ fontSize: 'var(--text-xs)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-muted)', marginTop: 6 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

const qtyBtn = {
  width: 40, height: 40, border: 'none', background: 'transparent', cursor: 'pointer',
  color: 'var(--text-primary)', fontSize: 20, lineHeight: 1,
};

window.Product = Product;
window.PRODUCT_FORMATS = FORMATS;