// AboutTrent.jsx — Owner story + Cicerone credential
const AboutTrent = () => {
  const [ref, inView] = window.useInView(0.1);

  const credentials = [
  {
    label: 'Certified Cicerone®',
    body: 'A globally-recognized credential earned through rigorous training in beer styles, draught systems, sensory evaluation, and proper service. At Tap Estate, draught isn\'t just a service — it\'s a craft taken seriously.',
    icon:
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
          <path d="M6 2v6a6 6 0 0 0 12 0V2" />
          <line x1="6" y1="2" x2="18" y2="2" />
          <path d="M9 14a3 3 0 0 0 6 0" />
          <line x1="12" y1="17" x2="12" y2="22" />
          <line x1="8" y1="22" x2="16" y2="22" />
        </svg>

  },
  {
    label: '20+ Years in Restaurants',
    body: 'Tap Estate is built on real restaurant experience — back-of-house, behind the bar, managing floors. The pressure, the margins, the staffing realities — Tap Estate gets it, because Tap Estate has lived it.',
    icon:
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
          <path d="M3 11h18M5 11V7a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v4" />
          <path d="M5 11v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8" />
          <line x1="9" y1="15" x2="9" y2="17" />
          <line x1="15" y1="15" x2="15" y2="17" />
        </svg>

  },
  {
    label: 'Education-First Approach',
    body: 'Tap Estate doesn\'t just clean and leave. Every visit includes time with your team — showing them how the system works, why maintenance matters, and what to watch for between visits. Knowledge is part of the service.',
    icon:
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
          <path d="M22 10v6M2 10l10-5 10 5-10 5z" />
          <path d="M6 12v5c3 3 9 3 12 0v-5" />
        </svg>

  }];


  return (
    <section style={{ background: '#fff', padding: '96px 32px', position: 'relative', overflow: 'hidden' }} id="about">
      {/* subtle gold accent bar top */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: 'linear-gradient(to right, transparent, #E8B422, transparent)', opacity: 0.4 }}></div>

      <div ref={ref} style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 72, alignItems: 'center' }}>

        {/* Left — portrait + cicerone seal */}
        <div style={{ position: 'relative', opacity: inView ? 1 : 0, transform: inView ? 'translateX(0)' : 'translateX(-32px)', transition: 'opacity 0.7s ease, transform 0.7s ease' }}>
          <div style={{ position: 'relative', borderRadius: 4, overflow: 'hidden', aspectRatio: '4 / 5', background: '#1A1210', boxShadow: '0 24px 60px rgba(0,0,0,0.18)' }}>
            <img
              src="https://images.unsplash.com/photo-1559526324-4b87b5e36e44?w=900&q=80&auto=format&fit=crop"
              alt="Trent — Tap Estate founder"
              style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.85) contrast(1.05)' }} />
            
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(14,12,11,0.85) 0%, rgba(14,12,11,0.15) 45%, transparent 70%)' }}></div>

            {/* Caption */}
            <div style={{ position: 'absolute', left: 28, bottom: 28, right: 28 }}>
              <div style={{ fontFamily: "'Raleway',sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#E8B422', marginBottom: 6 }}></div>
              <div style={{ fontFamily: "'Raleway',sans-serif", fontSize: 28, fontWeight: 800, color: '#fff', textTransform: 'uppercase', lineHeight: 1.05 }}></div>
              <div style={{ fontFamily: "'Raleway',sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.7)', marginTop: 4 }}></div>
            </div>
          </div>

          {/* Floating Cicerone seal */}
          <div style={{
            position: 'absolute', top: -18, right: -18,
            width: 124, height: 124, borderRadius: '50%',
            background: '#0E0C0B',
            border: '3px solid #E8B422',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 12px 32px rgba(14,12,11,0.32)',
            transform: 'rotate(-8deg)'
          }}>
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#E8B422" strokeWidth="1.6">
              <path d="M6 2v6a6 6 0 0 0 12 0V2" />
              <line x1="6" y1="2" x2="18" y2="2" />
              <path d="M9 14a3 3 0 0 0 6 0" />
              <line x1="12" y1="17" x2="12" y2="22" />
              <line x1="8" y1="22" x2="16" y2="22" />
            </svg>
            <div style={{ fontFamily: "'Raleway',sans-serif", fontSize: 9, fontWeight: 800, color: '#E8B422', letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 6, textAlign: 'center', lineHeight: 1.2 }}>Certified<br />Cicerone®</div>
          </div>
        </div>

        {/* Right — Story */}
        <div style={{ opacity: inView ? 1 : 0, transform: inView ? 'translateX(0)' : 'translateX(32px)', transition: 'opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
            <div style={{ width: 24, height: 1.5, background: '#8B1020' }}></div>
            <span style={{ fontFamily: "'Raleway',sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#8B1020' }}>ABOUT TAP ESTATE</span>
          </div>

          <h2 style={{ fontFamily: "'Raleway',sans-serif", fontSize: 'clamp(34px, 4.2vw, 52px)', fontWeight: 800, textTransform: 'uppercase', color: '#0E0C0B', lineHeight: 0.95, margin: '0 0 24px', letterSpacing: '-0.01em' }}>
            Two Decades<br />Behind the Bar.<br /><span style={{ color: '#8B1020' }}>One Passion.</span>
          </h2>

          <p style={{ fontFamily: "'Raleway',sans-serif", fontSize: 16, color: '#3C3432', lineHeight: 1.75, margin: '0 0 18px' }}>
            Tap Estate isn't just a service business. Over 20 years in the restaurant industry — pulling shifts, running floors, learning what really keeps a venue thriving — built the foundation. The <strong style={{ color: '#0E0C0B' }}>Certified Cicerone®</strong> credential took it further.
          </p>
          <p style={{ fontFamily: "'Raleway',sans-serif", fontSize: 16, color: '#3C3432', lineHeight: 1.75, margin: '0 0 36px' }}>
            When Tap Estate shows up at your venue, it's not just to clean lines. It's to share knowledge, train your team, and help your staff understand <em>why</em> maintenance matters. Better beer is the goal — but a better-informed team is what keeps it that way.
          </p>

          {/* Credentials list */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {credentials.map((c, i) =>
            <div key={c.label} style={{
              display: 'flex', gap: 18, alignItems: 'flex-start',
              paddingLeft: 18, borderLeft: '2px solid #EEECEB',
              opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : 'translateY(16px)',
              transition: `opacity 0.5s ease ${0.4 + i * 0.12}s, transform 0.5s ease ${0.4 + i * 0.12}s`
            }}>
                <div style={{ width: 44, height: 44, borderRadius: 4, background: '#FDF0F1', color: '#8B1020', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  {c.icon}
                </div>
                <div style={{ flex: 1, paddingTop: 2 }}>
                  <div style={{ fontFamily: "'Raleway',sans-serif", fontSize: 14.5, fontWeight: 800, color: '#0E0C0B', marginBottom: 6, letterSpacing: '0.01em' }}>{c.label}</div>
                  <div style={{ fontFamily: "'Raleway',sans-serif", fontSize: 13.5, color: '#706C6A', lineHeight: 1.65 }}>{c.body}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

};

Object.assign(window, { AboutTrent });