// DGClasses.jsx — classes section: info left, dark booking form right

const features = [
  'Two-hour guided tasting and technique session',
  'Each guest takes home a 2 oz bottle of house bitters',
  'Printed recipe cards to take home',
  'Available at venue of your choosing',
  'Groups of 4 to 10 people',
];


const DGClasses = () => (
  <section id="classes" style={clsSt.root}>
    <div style={clsSt.inner}>

      <div style={clsSt.infoCol}>
        <p style={clsSt.label}>Cocktail Classes</p>
        <h2 style={clsSt.heading}>Learn the craft.<br />Teach your team.</h2>
        <div style={clsSt.orn}><div style={clsSt.ornLine}/><span style={clsSt.ornStar}>✦</span><div style={clsSt.ornLine}/></div>
        <p style={clsSt.lead}>
          Private sessions for home enthusiasts, restaurant staff, and private events in Knoxville and surrounding areas.
        </p>
        <p style={clsSt.body}>
          Each class is built around a specific spirit or style, so you walk away with real knowledge you can apply. Great for date nights, bachelorette parties, corporate team-building, or training your bar team on bitters and cocktail fundamentals.
        </p>
        <p style={clsSt.body}>
          We can come to your venue, or host at our space — whatever works best for your group.
        </p>
        <ul style={clsSt.featureList}>
          {features.map(feat => (
            <li key={feat} style={clsSt.featureItem}>
              <span style={clsSt.featureStar}>✦</span>
              <span>{feat}</span>
            </li>
          ))}
        </ul>
        <div style={{ marginTop: 40 }}>
          <a href="#contact" style={clsSt.ctaBtn}
            onMouseEnter={e => e.currentTarget.style.background = '#D4B070'}
            onMouseLeave={e => e.currentTarget.style.background = '#B8904A'}>
            Inquire About a Class
          </a>
        </div>
      </div>

    </div>
  </section>
);

const clsSt = {
  root: { background: '#F2ECDC', borderTop: '1px solid rgba(184,144,74,0.15)' },
  inner: {
    maxWidth: 760, margin: '0 auto', padding: '96px 48px',
  },
  infoCol: {},
  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: { color: '#B8904A', fontSize: '0.85rem' },
  lead: {
    fontFamily: 'Georgia, serif', fontStyle: 'italic', fontSize: '1.05rem',
    color: '#3A3A3A', lineHeight: 1.7, margin: '0 0 16px', maxWidth: '56ch',
  },
  body: {
    fontFamily: 'Georgia, serif', fontSize: '0.93rem',
    color: '#3A3A3A', lineHeight: 1.7, margin: '0 0 12px', maxWidth: '56ch',
  },
  featureList: { listStyle: 'none', padding: 0, margin: '24px 0 0' },
  featureItem: {
    display: 'flex', alignItems: 'flex-start', gap: 12,
    padding: '10px 0', borderBottom: '1px solid rgba(184,144,74,0.18)',
    fontFamily: 'Georgia, serif', fontSize: '0.9rem', color: '#3A3A3A', lineHeight: 1.5,
  },
  featureStar: { color: '#B8904A', flexShrink: 0, marginTop: 2, fontSize: '0.7rem' },
  ctaBtn: {
    display: 'inline-block',
    fontFamily: 'Arial, sans-serif', fontSize: '0.68rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.13em',
    background: '#B8904A', color: '#1A1A1A', textDecoration: 'none',
    padding: '13px 34px', transition: 'background 0.2s',
  },
  formPanel: {
    background: '#1A1A1A', padding: '36px',
    border: '1px solid rgba(184,144,74,0.22)',
  },
  formTitle: {
    fontFamily: 'Georgia, serif', fontSize: '1.35rem', fontWeight: 700,
    color: '#F2ECDC', margin: '0 0 24px',
  },
  formRow: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 0 },
  fg: { marginBottom: 14 },
  lbl: {
    display: 'block', fontFamily: 'Arial, sans-serif', fontSize: '0.57rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.16em', color: '#B8904A', marginBottom: 6,
  },
  input: {
    width: '100%', background: 'rgba(242,236,220,0.05)',
    border: '1px solid rgba(184,144,74,0.28)', color: '#F2ECDC',
    padding: '10px 12px', fontFamily: 'Georgia, serif', fontSize: '0.87rem',
    outline: 'none', boxSizing: 'border-box',
  },
  submitBtn: {
    width: '100%', background: '#B8904A', color: '#1A1A1A', border: 'none',
    padding: '13px', marginTop: 4,
    fontFamily: 'Arial, sans-serif', fontSize: '0.65rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.18em',
    cursor: 'pointer', transition: 'background 0.2s',
  },
  success: {
    fontFamily: 'Georgia, serif', fontStyle: 'italic', fontSize: '1rem',
    color: '#D4B070', textAlign: 'center', padding: '24px 0',
  },
};

Object.assign(window, { DGClasses });