// DGProducts.jsx — dark section: 6-product grid + custom flavor form

const { useState: useSt } = React;

const PRODUCTS = [
  { id: 1, name: 'Aromatic',      sub: 'The House Standard',  notes: 'Classic · Versatile · Essential',        desc: 'Our flagship bitter. Deep and complex, with the herbal backbone of a true aromatic. Works in Old Fashioneds, Manhattans, or wherever your recipe calls for classic bitters.', price: 18, badge: 'Signature', bottleColor: '#5C2E0A' },
  { id: 2, name: 'Orange',        sub: 'Bright & Bracing',    notes: 'Citrus · Clean · Approachable',          desc: 'Built around real orange peel — bright and clean with just enough bitterness to do its job. A natural fit for Champagne cocktails, sours, and anything needing a citrus lift.', price: 18, badge: null,        bottleColor: '#8B4A10' },
  { id: 3, name: 'Chocom\u00f3l\u00e9', sub: 'Unexpected Depth', notes: 'Chocolate \u00b7 Chili \u00b7 Rich', desc: 'Chocolate and chili in a bottle \u2014 richer than it sounds, more versatile than expected. Plays well with mezcal, bourbon, and rum. Reliable depth for dessert-style builds.', price: 18, badge: null, bottleColor: '#2A1508' },
  { id: 4, name: 'Lemon',         sub: 'Tart & Precise',      notes: 'Tart · Clean · Bartender-Friendly',     desc: 'Sharp lemon with a clean finish — functional and precise. Use it anywhere you want citrus bitterness without the sweetness of orange. Solid in gin drinks and spritzes.', price: 18, badge: null,        bottleColor: '#7A6010' },
  { id: 5, name: 'Lavender',      sub: 'Floral & Delicate',   notes: 'Floral · Aromatic · Subtle',             desc: 'Subtle lavender with enough structure to show up in the glass. Works beautifully in gin and vodka cocktails, lemonades, and non-alcoholic builds. Use with a light hand.', price: 18, badge: null,        bottleColor: '#3A2848' },
  { id: 6, name: 'Winter Bitters',sub: 'Warm Spice',          notes: 'Warming · Spiced · Seasonal',           desc: 'Built around warm baking spices — cinnamon, clove, a touch of star anise. Designed for cold weather but honest enough for year-round use. Excellent in hot drinks and whiskey sours.', price: 18, badge: null, bottleColor: '#3A1A08' },
];

const BottleSVG = () => (
  <svg viewBox="0 0 48 108" width="48" height="108" fill="none" xmlns="http://www.w3.org/2000/svg">
    {/* dropper bulb */}
    <ellipse cx="24" cy="6" rx="5.5" ry="4.5" stroke="#B8904A" strokeWidth="1.4"/>
    {/* dropper tube */}
    <line x1="24" y1="10.5" x2="24" y2="17" stroke="#B8904A" strokeWidth="1.4"/>
    {/* cap */}
    <rect x="16" y="17" width="16" height="8" rx="1" stroke="#B8904A" strokeWidth="1.4"/>
    {/* neck */}
    <rect x="20" y="25" width="8" height="9" stroke="#B8904A" strokeWidth="1.4"/>
    {/* shoulder */}
    <path d="M10 42 Q10 34 20 34 L28 34 Q38 34 38 42" stroke="#B8904A" strokeWidth="1.4" strokeLinecap="round"/>
    {/* body */}
    <rect x="10" y="42" width="28" height="58" rx="1.5" stroke="#B8904A" strokeWidth="1.4"/>
    {/* label band top */}
    <line x1="13" y1="54" x2="35" y2="54" stroke="#B8904A" strokeWidth="0.9" opacity="0.5"/>
    {/* label band bottom */}
    <line x1="13" y1="88" x2="35" y2="88" stroke="#B8904A" strokeWidth="0.9" opacity="0.5"/>
    {/* center ornament */}
    <text x="24" y="74" textAnchor="middle" fontSize="9" fill="#B8904A" opacity="0.45" fontFamily="Arial, sans-serif">✦</text>
  </svg>
);

const ProductCard = ({ product, onAdd }) => {
  const [hovered, setHovered] = useSt(false);
  return (
    <div style={{ ...prodSt.card, ...(hovered ? prodSt.cardHover : {}) }}
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}>
      {product.badge && <div style={prodSt.badge}>{product.badge}</div>}
      <div style={prodSt.topBar} />
      <div style={prodSt.imgArea}>
        <BottleSVG />
      </div>
      <div style={prodSt.body}>
        <p style={prodSt.sub}>{product.sub}</p>
        <h3 style={prodSt.name}>{product.name}</h3>
        <div style={prodSt.divider} />
        <p style={prodSt.notes}>{product.notes}</p>
        <p style={prodSt.desc}>{product.desc}</p>
        <div style={prodSt.footer}>
          <span style={prodSt.price}>${product.price} <span style={{fontSize:'0.7rem', fontWeight:400}}>/ 2oz</span></span>
          <button style={prodSt.addBtn} onClick={() => onAdd(product)}
            onMouseEnter={e => { e.currentTarget.style.background = '#B8904A'; e.currentTarget.style.color = '#1A1A1A'; e.currentTarget.style.borderColor = '#B8904A'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#B8904A'; e.currentTarget.style.borderColor = 'rgba(184,144,74,0.5)'; }}>
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  );
};


const DGProducts = ({ onAdd }) => (
  <section id="products" style={prodSt.root}>
    <div style={prodSt.inner}>
      <p style={prodSt.label}>Our Bitters</p>
      <h2 style={prodSt.heading}>Memorable flavors. Endless applications.</h2>
      <div style={prodSt.orn}><div style={prodSt.ornLine}/><span style={prodSt.ornStar}>✦</span><div style={prodSt.ornLine}/></div>
      <div style={prodSt.grid} className="dg-products-grid">
        {PRODUCTS.map(p => <ProductCard key={p.id} product={p} onAdd={onAdd} />)}
      </div>
      <div style={prodSt.customCta}>
        <p style={prodSt.customCtaText}>
          Looking for something specific? We develop custom flavors for bars, restaurants, and special projects.{' '}
          <a href="#contact" style={prodSt.customCtaLink}
            onMouseEnter={e => e.target.style.color = '#D4B070'}
            onMouseLeave={e => e.target.style.color = '#B8904A'}>
            Get in touch to request a custom flavor.
          </a>
        </p>
      </div>
    </div>
  </section>
);

const prodSt = {
  root: { background: '#1A1A1A', borderTop: '1px solid rgba(184,144,74,0.12)' },
  inner: { maxWidth: 1100, margin: '0 auto', padding: '96px 48px' },
  label: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.63rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.2em', color: '#B8904A',
    textAlign: 'center', margin: '0 0 12px',
  },
  heading: {
    fontFamily: 'Georgia, serif', fontSize: 'clamp(1.8rem, 3vw, 2.5rem)', fontWeight: 700,
    color: '#F2ECDC', textAlign: 'center', margin: '0 0 24px', letterSpacing: '-0.01em',
  },
  orn: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, margin: '0 0 48px' },
  ornLine: { height: 1, width: 48, background: 'rgba(184,144,74,0.4)' },
  ornStar: { color: '#B8904A', fontSize: '0.85rem' },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 },
  card: {
    background: 'rgba(242,236,220,0.04)', border: '1px solid rgba(184,144,74,0.2)',
    display: 'flex', flexDirection: 'column', position: 'relative',
    transition: 'background 0.25s, transform 0.25s, box-shadow 0.25s',
  },
  cardHover: {
    background: 'rgba(184,144,74,0.07)', transform: 'translateY(-4px)',
    boxShadow: '0 8px 28px rgba(184,144,74,0.1)',
  },
  topBar: { height: 2, background: 'linear-gradient(90deg, transparent, #B8904A, transparent)' },
  badge: {
    position: 'absolute', top: 14, right: 14,
    fontFamily: 'Arial, sans-serif', fontSize: '0.58rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.1em',
    background: '#B8904A', color: '#1A1A1A', padding: '3px 10px',
  },
  imgArea: {
    background: 'rgba(242,236,220,0.03)',
    borderBottom: '1px solid rgba(184,144,74,0.12)',
    height: 156, display: 'flex', alignItems: 'center', justifyContent: 'center',
  },
  body: { padding: '20px 22px 22px', display: 'flex', flexDirection: 'column', flex: 1 },
  sub: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.58rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.13em', color: '#B8904A', margin: '0 0 5px',
  },
  name: {
    fontFamily: 'Georgia, serif', fontSize: '1.15rem', fontWeight: 700,
    color: '#F2ECDC', margin: '0 0 10px',
  },
  divider: { height: 1, background: 'rgba(184,144,74,0.22)', margin: '0 0 10px' },
  notes: {
    fontFamily: 'Georgia, serif', fontStyle: 'italic', fontSize: '0.78rem',
    color: 'rgba(242,236,220,0.5)', margin: '0 0 10px',
  },
  desc: {
    fontFamily: 'Georgia, serif', fontSize: '0.82rem',
    color: 'rgba(242,236,220,0.55)', lineHeight: 1.65, margin: '0 0 16px', flex: 1,
  },
  footer: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 'auto' },
  price: { fontFamily: 'Georgia, serif', fontSize: '1.1rem', fontWeight: 700, color: '#D4B070' },
  addBtn: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.6rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.1em',
    background: 'transparent', color: '#B8904A',
    border: '1.5px solid rgba(184,144,74,0.5)', padding: '7px 14px',
    cursor: 'pointer', transition: 'all 0.18s',
  },
  customCta: {
    marginTop: 48, textAlign: 'center', borderTop: '1px solid rgba(184,144,74,0.15)', paddingTop: 40,
  },
  customCtaText: {
    fontFamily: 'Georgia, serif', fontStyle: 'italic', fontSize: '1rem',
    color: 'rgba(242,236,220,0.5)', lineHeight: 1.7, margin: 0,
  },
  customCtaLink: {
    color: '#B8904A', textDecoration: 'none', transition: 'color 0.18s',
  },
  customWrap: {
    marginTop: 64, border: '1px solid rgba(184,144,74,0.25)',
    padding: '48px', maxWidth: 680, marginLeft: 'auto', marginRight: 'auto',
    position: 'relative',
  },
  customLabel: {
    position: 'absolute', top: -1, left: '50%', transform: 'translateX(-50%)',
    background: '#1A1A1A', padding: '0 16px',
  },
  customLabelText: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.6rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.2em', color: '#B8904A',
  },
  customTitle: {
    fontFamily: 'Georgia, serif', fontSize: '1.5rem', fontWeight: 700,
    color: '#F2ECDC', textAlign: 'center', margin: '0 0 12px',
  },
  customDesc: {
    fontFamily: 'Georgia, serif', fontStyle: 'italic', fontSize: '0.9rem',
    color: 'rgba(242,236,220,0.55)', textAlign: 'center', lineHeight: 1.65, margin: '0 0 28px',
  },
  successMsg: {
    fontFamily: 'Georgia, serif', fontStyle: 'italic', fontSize: '1rem',
    color: '#D4B070', textAlign: 'center', padding: '16px 0',
  },
  formRow: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 0 },
  formGroup: { marginBottom: 14 },
  formLabel: {
    display: 'block', fontFamily: 'Arial, sans-serif', fontSize: '0.58rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.16em', color: '#B8904A', marginBottom: 6,
  },
  formInput: {
    width: '100%', background: 'rgba(242,236,220,0.05)',
    border: '1px solid rgba(184,144,74,0.28)', color: '#F2ECDC',
    padding: '10px 14px', fontFamily: 'Georgia, serif', fontSize: '0.88rem',
    outline: 'none', boxSizing: 'border-box',
  },
  submitBtn: {
    width: '100%', background: '#B8904A', color: '#1A1A1A',
    border: 'none', padding: '13px', marginTop: 8,
    fontFamily: 'Arial, sans-serif', fontSize: '0.65rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.18em',
    cursor: 'pointer', transition: 'background 0.2s',
  },
};

Object.assign(window, { DGProducts, PRODUCTS });