// Pledge.jsx — Tap Estate Pledge + Certified badge
const Pledge = ({ badgeSize = 240 }) => {
  const [ref, inView] = window.useInView(0.08);

  const promises = [
  {
    title: 'Master Craftsmanship',
    body: 'Every line, every fitting, every cleaning — done to Cicerone-level standards. No shortcuts, ever.',
    icon:
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
          <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
        </svg>

  },
  {
    title: 'Rapid Response',
    body: 'Most service calls answered same-day. Emergency draught issues? Tap Estate is on the way before your next pour.',
    icon:
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
          <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
        </svg>

  },
  {
    title: 'On-Site Education',
    body: 'Tap Estate trains your team on every visit — how the system works, what to watch for, and how to keep it dialed in between cleanings.',
    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>

  },
  {
    title: 'Honest Recommendations',
    body: 'Tap Estate tells you what your system actually needs — not what makes the most money. Trust is the whole business.',
    icon:
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
          <path d="M9 12l2 2 4-4" />
          <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9c1.5 0 2.92.37 4.16 1.02" />
        </svg>

  },
  {
    title: 'Locally Owned & Operated',
    body: 'Not brewery-owned. Not a franchise. A real Southwestern Ontario business invested in this community.',
    icon:
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
          <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" />
          <circle cx="12" cy="9" r="2.5" />
        </svg>

  },
  {
    title: 'Quality Assurance',
    body: 'If a venue isn\'t satisfied with the work, Tap Estate makes it right. No invoice questions, no hassle, no excuses.',
    icon:
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
          <polyline points="22 4 12 14.01 9 11.01" />
        </svg>

  }];


  return (
    <section style={{
      background: '#0E0C0B',
      padding: '104px 32px',
      position: 'relative',
      overflow: 'hidden'
    }} id="the-pledge">
      {/* Background flourishes */}
      <div style={{ position: 'absolute', top: '-10%', right: '-5%', width: 520, height: 520, background: 'radial-gradient(circle, rgba(232,180,34,0.08) 0%, transparent 65%)', pointerEvents: 'none' }}></div>
      <div style={{ position: 'absolute', bottom: '-10%', left: '-5%', width: 480, height: 480, background: 'radial-gradient(circle, rgba(139,16,32,0.18) 0%, transparent 65%)', pointerEvents: 'none' }}></div>

      <div ref={ref} style={{ position: 'relative', maxWidth: 1200, margin: '0 auto' }}>

        {/* Header — Badge + Title */}
        <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: 56, alignItems: 'center', marginBottom: 64 }}>

          {/* Certified Badge */}
          <div style={{ opacity: inView ? 1 : 0, transform: inView ? 'scale(1) rotate(0deg)' : 'scale(0.85) rotate(-12deg)', transition: 'opacity 0.8s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)' }}>
            <CertifiedBadge size={badgeSize} />
          </div>

          {/* Headline */}
          <div style={{ opacity: inView ? 1 : 0, transform: inView ? 'translateX(0)' : 'translateX(28px)', transition: 'opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s' }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
              <div style={{ width: 28, height: 2, background: '#E8B422' }}></div>
              <span style={{ fontFamily: "'Raleway',sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#E8B422' }}>Our Promise to You</span>
            </div>
            <h2 style={{ fontFamily: "'Raleway',sans-serif", fontSize: 'clamp(40px, 5.5vw, 72px)', fontWeight: 800, textTransform: 'uppercase', color: '#fff', lineHeight: 0.92, margin: '0 0 20px', letterSpacing: '-0.01em' }}>
              The Tap Estate<br /><span style={{ color: '#E8B422' }}>Pledge.</span>
            </h2>
            <p style={{ fontFamily: "'Raleway',sans-serif", fontSize: 16, color: 'rgba(255,255,255,0.72)', lineHeight: 1.65, maxWidth: 560, margin: 0 }}>
              When the <strong style={{ color: '#fff' }}>Tap Estate Certified</strong> badge appears on a bar, the standard behind it is set. Six commitments — put in writing, never broken.
            </p>
          </div>
        </div>

        {/* Promises Grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 4, overflow: 'hidden' }}>
          {promises.map((p, i) =>
          <div key={p.title} style={{
            background: '#1A1210',
            padding: '36px 30px',
            opacity: inView ? 1 : 0,
            transform: inView ? 'translateY(0)' : 'translateY(20px)',
            transition: `opacity 0.6s ease ${0.3 + i * 0.08}s, transform 0.6s ease ${0.3 + i * 0.08}s`,
            position: 'relative'
          }}>
              {/* Number */}
              <div style={{ position: 'absolute', top: 18, right: 22, fontFamily: "'Raleway',sans-serif", fontSize: 56, fontWeight: 800, color: 'rgba(232,180,34,0.07)', lineHeight: 1, letterSpacing: '-0.04em' }}>0{i + 1}</div>

              <div style={{ width: 48, height: 48, borderRadius: 4, background: 'rgba(232,180,34,0.10)', border: '1px solid rgba(232,180,34,0.22)', color: '#E8B422', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 22, position: 'relative', zIndex: 1 }}>
                {p.icon}
              </div>
              <div style={{ fontFamily: "'Raleway',sans-serif", fontSize: 16, fontWeight: 800, color: '#fff', marginBottom: 10, textTransform: 'uppercase', letterSpacing: '0.01em', position: 'relative', zIndex: 1 }}>{p.title}</div>
              <div style={{ fontFamily: "'Raleway',sans-serif", fontSize: 13.5, color: 'rgba(255,255,255,0.65)', lineHeight: 1.7, position: 'relative', zIndex: 1 }}>{p.body}</div>
            </div>
          )}
        </div>

        {/* Signature line */}
        <div style={{ marginTop: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 18, opacity: inView ? 1 : 0, transition: 'opacity 0.6s ease 0.9s' }}>
          <div style={{ width: 60, height: 1, background: 'rgba(232,180,34,0.4)' }}></div>
          <div style={{ fontFamily: "'Raleway',sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.65)', letterSpacing: '0.06em', fontStyle: 'italic' }}>
            <span style={{ color: '#E8B422', fontWeight: 700, fontStyle: 'normal' }}>Tap Estate · Southwestern Ontario</span>
          </div>
          <div style={{ width: 60, height: 1, background: 'rgba(232,180,34,0.4)' }}></div>
        </div>
      </div>
    </section>);

};

// ── Certified Badge — white logo disc with curved text above/below ─────
const CertifiedBadge = ({ size = 240 }) => {
  const id = 'badge-' + Math.random().toString(36).slice(2, 8);
  // Disc radius for the white logo background
  const disc = 78;
  // Arc radius for the text — slightly outside the disc for breathing room
  const arc = 100;
  return (
    <div style={{ position: 'relative', width: size, height: size, margin: '0 auto' }}>
      <svg width={size} height={size} viewBox="0 0 240 240" style={{ display: 'block', overflow: 'visible', width: "240px", height: "240px" }}>
        <defs>
          <path id={id + '-top'} d={`M ${120 - arc},120 A ${arc},${arc} 0 0,1 ${120 + arc},120`} fill="none" />
          <path id={id + '-bot'} d={`M ${120 - arc},120 A ${arc},${arc} 0 0,0 ${120 + arc},120`} fill="none" />
        </defs>

        {/* White disc for the logo */}
        <circle cx="120" cy="120" r={disc} fill="#fff" />

        {/* Top text — TAP ESTATE */}
        <text fill="#E8B422" fontFamily="'Raleway', sans-serif" fontSize="16" fontWeight="900" letterSpacing="6">
          <textPath href={'#' + id + '-top'} startOffset="50%" textAnchor="middle" style={{ padding: "0px" }}>
            TAP ESTATE
          </textPath>
        </text>

        {/* Bottom text — CERTIFIED. dominantBaseline="hanging" makes letters
                      hang DOWN from the path (away from center), so the inner edge of
                      the letters sits at the same distance from the disc as the top text. */}
        <text fill="#E8B422" fontFamily="'Raleway', sans-serif" fontSize="16" fontWeight="900" letterSpacing="6" dominantBaseline="hanging">
          <textPath href={'#' + id + '-bot'} startOffset="50%" textAnchor="middle" style={{ padding: "0px", lineHeight: "1.4" }}>
            CERTIFIED
          </textPath>
        </text>
      </svg>

      {/* Tap Estate logo centered on the white disc — sized to fill it */}
      <img
        src="assets/tap-estate-logo.png"
        alt="Tap Estate"
        style={{
          position: 'absolute',
          top: '50%', left: '50%',
          transform: 'translate(-50%, -50%)',
          width: '60%', height: '60%',
          objectFit: 'contain',
          pointerEvents: 'none',
          zIndex: 2
        }} />
      
      
    </div>);

};

Object.assign(window, { Pledge, CertifiedBadge });