// DGAbout.jsx — about section: text left, logo in oval right

const DGAbout = () => {
  const pillars = [
  { title: 'Small Batch', desc: 'Made in limited runs to keep quality consistent.' },
  { title: 'Classic Recipes', desc: 'Rooted in traditional bitters-making techniques.' },
  { title: 'Home & Pro', desc: 'Works equally well behind a home bar or a busy service well.' },
  { title: 'Locally Made', desc: 'Proudly handcrafted since 2019.' }];


  return (
    <section id="about" style={aboutSt.root}>
      <div style={aboutSt.inner} className="dg-about-grid">

        <div style={aboutSt.textCol}>
          <p style={aboutSt.label}>Our Story</p>
          <h2 style={aboutSt.heading}>Made in Tennessee.<br />Built for the bar.</h2>
          <div style={aboutSt.orn}>
            <div style={aboutSt.ornLine} />
            <span style={aboutSt.ornStar}>✦</span>
            <div style={aboutSt.ornLine} />
          </div>
          <p style={aboutSt.lead}>Founded in 2019, The Dashing Gent Bitters Co. makes small-batch cocktail bitters right here in East Tennessee — for home bartenders and working professionals alike.

          </p>
          <p style={aboutSt.body}>
            Every batch starts with quality botanicals and a clear goal: make the drink better. Whether you're stocking your home bar or building out a cocktail program for your restaurant, our bitters are made to perform.
          </p>
          <p style={aboutSt.body}>
            We keep it simple — source good ingredients, produce in small batches, and stand behind every bottle.
          </p>
          <div style={aboutSt.pillars}>
            {pillars.map((p) =>
            <div key={p.title} style={aboutSt.pillar}>
                <strong style={aboutSt.pillarTitle}>{p.title}</strong>
                <span style={aboutSt.pillarDesc}>{p.desc}</span>
              </div>
            )}
          </div>
        </div>

        <div style={aboutSt.decoCol} className="dg-about-deco">
          <div style={aboutSt.oval}>
            <div style={aboutSt.ovalInnerRing} />
            <div style={aboutSt.ovalPattern} />
            <img src="assets/logo_primary.png" alt="" style={aboutSt.ovalLogo} />
          </div>
          <p style={aboutSt.decoTagline}>
</p>
        </div>

      </div>
    </section>);
};

const aboutSt = {
  root: { background: '#F2ECDC', borderTop: '1px solid rgba(184,144,74,0.15)' },
  inner: {
    maxWidth: 1100, margin: '0 auto', padding: '96px 48px',
    display: 'grid', gridTemplateColumns: '1fr 380px', gap: '80px', alignItems: 'center'
  },
  textCol: {},
  label: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.63rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.2em', color: '#B8904A', margin: '0 0 14px'
  },
  heading: {
    fontFamily: 'Georgia, serif', fontSize: 'clamp(1.8rem, 3vw, 2.6rem)', fontWeight: 700,
    lineHeight: 1.18, color: '#1A1A1A', margin: '0 0 24px'
  },
  orn: { display: 'flex', alignItems: 'center', gap: 12, margin: '0 0 28px' },
  ornLine: { height: 1, width: 40, background: 'rgba(184,144,74,0.5)' },
  ornStar: { fontFamily: 'Arial, sans-serif', color: '#B8904A', fontSize: '0.85rem' },
  lead: {
    fontFamily: 'Georgia, serif', fontStyle: 'italic', fontSize: '1.05rem',
    color: '#3A3A3A', lineHeight: 1.7, margin: '0 0 16px', maxWidth: '58ch'
  },
  body: {
    fontFamily: 'Georgia, serif', fontSize: '0.93rem',
    color: '#3A3A3A', lineHeight: 1.7, margin: '0 0 12px', maxWidth: '58ch'
  },
  pillars: {
    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px 28px', marginTop: 32
  },
  pillar: { borderLeft: '2px solid #B8904A', paddingLeft: 12, paddingTop: 2 },
  pillarTitle: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.6rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.13em', color: '#B8904A',
    display: 'block', marginBottom: 5
  },
  pillarDesc: {
    fontFamily: 'Georgia, serif', fontSize: '0.82rem', color: '#3A3A3A', lineHeight: 1.55
  },
  decoCol: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20 },
  oval: {
    width: 300, height: 348, borderRadius: '50%',
    border: '1.5px solid rgba(184,144,74,0.65)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    position: 'relative', overflow: 'hidden',
    background: '#F2ECDC',
    boxShadow: '0 4px 24px rgba(184,144,74,0.12)'
  },
  ovalInnerRing: {
    position: 'absolute', inset: 10, borderRadius: '50%',
    border: '1px solid rgba(184,144,74,0.28)',
    zIndex: 2, pointerEvents: 'none'
  },
  ovalPattern: {
    position: 'absolute', inset: 0,
    backgroundImage: "url('assets/pattern_bg.png')",
    backgroundSize: '220px auto', backgroundRepeat: 'repeat',
    opacity: 0.11
  },
  ovalLogo: {
    height: 190, width: 'auto', position: 'relative', zIndex: 3,
    filter: 'drop-shadow(0 4px 18px rgba(26,26,26,0.14))'
  },
  decoTagline: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.6rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.2em', color: '#B8904A', margin: 0
  }
};

Object.assign(window, { DGAbout });