// DGFooter.jsx — full footer: pattern strip, logo + tagline, 3 link columns, legal

const DGFooter = () => {
  const cols = [
    { title: 'Shop',    links: ['Aromatic', 'Orange', 'Chocomolé', 'Lemon', 'Lavender', 'Winter Bitters'] },
    { title: 'Explore', links: ['Our Story', 'Cocktail Classes'] },
    { title: 'Connect', links: ['Contact Us', 'Instagram', 'dashinggentbitters@gmail.com'] },
  ];

  const linkHref = (link) => {
    const map = {
      'Our Story':                   '#about',
      'Cocktail Classes':            '#classes',
      'Contact Us':                  '#contact',
      'Instagram':                   'https://www.instagram.com/dashinggentbitters/',
      'dashinggentbitters@gmail.com':'mailto:dashinggentbitters@gmail.com',
    };
    return map[link] || '#products';
  };

  return (
    <footer style={footSt.root}>
      <div style={footSt.patternStrip} />
      <div style={footSt.inner} className="dg-footer-inner">
        <div style={footSt.top} className="dg-footer-top">
          <div style={footSt.brand}>
            <img src="assets/logo_primary.png" alt="The Dashing Gent Bitters Co." style={footSt.logo} />
            <p style={footSt.tagline}>Four Dashes. One Moment.</p>
            <p style={footSt.sub}>Small-batch bitters, tinctures,<br />shrubs and syrups.</p>
            <p style={footSt.location}>Knoxville, Tennessee · Est. 2019</p>
          </div>
          <div style={footSt.cols} className="dg-footer-cols">
            {cols.map(col => (
              <div key={col.title} style={footSt.col}>
                <p style={footSt.colTitle}>{col.title}</p>
                {col.links.map(link => (
                  <a key={link}
                     href={linkHref(link)}
                     target={link === 'Instagram' ? '_blank' : undefined}
                     rel={link === 'Instagram' ? 'noopener noreferrer' : undefined}
                     style={footSt.link}
                     onMouseEnter={e => e.target.style.color = '#B8904A'}
                     onMouseLeave={e => e.target.style.color = 'rgba(242,236,220,0.55)'}>
                    {link}
                  </a>
                ))}
              </div>
            ))}
          </div>
        </div>

        <div style={footSt.divider} />

        <div style={footSt.bottom}>
          <span style={footSt.legal}>© 2026 The Dashing Gent Bitters Co. All rights reserved.</span>
          <div style={footSt.bottomRight}>
            <span style={footSt.legal}>dashinggentbitters@gmail.com</span>
          </div>
        </div>
      </div>
    </footer>
  );
};

const footSt = {
  root: { background: '#1A1A1A', borderTop: '1px solid rgba(184,144,74,0.12)' },
  patternStrip: {
    height: 72,
    backgroundImage: "url('assets/pattern_bg.png')",
    backgroundSize: '280px auto', backgroundRepeat: 'repeat-x',
    backgroundPosition: 'center', opacity: 0.1,
    borderBottom: '1px solid rgba(184,144,74,0.12)',
  },
  inner: { maxWidth: 1160, margin: '0 auto', padding: '56px 48px 40px' },
  top: { display: 'flex', gap: 64, paddingBottom: 48 },
  brand: { flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start' },
  logo: { height: 88, width: 'auto', maxWidth: 180, objectFit: 'contain' },
  tagline: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.62rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.2em', color: '#B8904A', margin: 0,
  },
  sub: {
    fontFamily: 'Georgia, serif', fontStyle: 'italic', fontSize: '0.82rem',
    color: 'rgba(242,236,220,0.4)', lineHeight: 1.55, margin: 0,
  },
  location: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.58rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.12em',
    color: 'rgba(184,144,74,0.5)', margin: 0,
  },
  cols: { display: 'flex', gap: 48, flex: 1, justifyContent: 'flex-end' },
  col: { display: 'flex', flexDirection: 'column', gap: 10 },
  colTitle: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.62rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.14em',
    color: '#B8904A', margin: '0 0 6px',
  },
  link: {
    fontFamily: 'Georgia, serif', fontSize: '0.84rem',
    color: 'rgba(242,236,220,0.55)', textDecoration: 'none',
    lineHeight: 1.4, transition: 'color 0.18s',
  },
  divider: { height: 1, background: 'rgba(184,144,74,0.2)', marginBottom: 24 },
  bottom: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8,
  },
  bottomRight: { display: 'flex', gap: 10, alignItems: 'center' },
  legal: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.58rem',
    letterSpacing: '0.06em', textTransform: 'uppercase',
    color: 'rgba(242,236,220,0.28)',
  },
  legalDot: { color: 'rgba(184,144,74,0.3)', fontSize: '0.8rem' },
};

Object.assign(window, { DGFooter });