'use client';

import React, { useRef, useState } from 'react';
import { ChevronDown } from 'lucide-react';

// Three worries as an always-visible tab strip of quotes — click one to reveal
// its detail and the Veritas reply in a single panel. Faint equations separate
// the tabs. On mobile the quotes stack and expand in place.

const EXCHANGES = [
  {
    q: 'I can\u2019t help with the homework anymore.',
    sub: 'You explained fractions just fine. Then came two-step equations — and now you\u2019re relearning algebra at 10pm.',
    a: 'A teacher your child can ask anything — and reports written for you, in plain English.',
  },
  {
    q: 'She just goes quiet when she doesn\u2019t understand.',
    sub: 'In a big class, a confused child is invisible. The teacher moves on. Your child nods along.',
    a: 'Six students per class. Every hesitation is seen the same day.',
  },
  {
    q: 'I don\u2019t want to sign up for the whole year to find out.',
    sub: 'Most programs want the full year up front. What if you pay for the year and it isn\u2019t right for your child?',
    a: 'Monthly billing. Cancel any time. The first four weeks are measured.',
  },
];

const RULES = ['3x+7=22', 'x=5', 'y=2x+3', 'f(3)=7'];

const QUOTE = "'Fraunces', Georgia, serif";
const INACTIVE = 0.68;

function Detail({ e }) {
  return (
    <div className="grid lg:grid-cols-2 gap-4 lg:gap-6 items-start">
      <p className="text-sm font-medium leading-relaxed" style={{ color: '#6B5B4E' }}>{e.sub}</p>
      <div className="rounded-2xl px-5 py-4" style={{ background: 'rgba(212,175,56,0.12)', borderLeft: '3px solid #D4AF37' }}>
        <p className="text-sm font-extrabold leading-relaxed" style={{ color: '#2D0A18' }}>{e.a}</p>
      </div>
    </div>
  );
}

export default function PainPointsSection() {
  const [active, setActive] = useState(0);
  const tabRefs = useRef({});

  const select = (i) => {
    setActive(i);
    tabRefs.current[i]?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
  };

  return (
    <section className="px-5 py-16" style={{ background: '#FAF6EF' }}>
      <div className="max-w-6xl mx-auto">
        <div className="max-w-2xl mb-10">
          <p className="text-[10px] font-bold uppercase tracking-[0.22em] mb-3" style={{ color: '#B8912E' }}>Does this sound familiar?</p>
          <h2 className="text-2xl sm:text-3xl font-extrabold mb-3" style={{ color: '#2D0A18', fontFamily: QUOTE }}>
            If you&apos;ve said any of this, you&apos;re in the right place.
          </h2>
          <p className="text-sm font-medium leading-relaxed" style={{ color: '#4A3A30' }}>
            You&apos;re not overthinking it. This is the course that shapes what comes next in
            your child&apos;s math — and the year to get it right.
          </p>
        </div>

        {/* Desktop: horizontal scroll strip, active quote snapped into view */}
        <div className="hidden lg:block">
          <div className="overflow-x-auto scrollbar-hide -mx-3 px-3">
            <div className="flex items-center gap-4 min-w-max py-1">
              {EXCHANGES.map((e, i) => (
                <React.Fragment key={e.q}>
                  <button ref={(el) => { tabRefs.current[i] = el; }} onClick={() => select(i)}
                    className="flex-shrink-0 max-w-[260px] text-left text-sm font-medium italic leading-snug cursor-pointer pb-1 transition-opacity hover:opacity-90"
                    style={{
                      color: '#8B4E78',
                      fontFamily: QUOTE,
                      opacity: i === active ? 1 : INACTIVE,
                      borderBottom: i === active ? '2px solid #D4AF37' : '2px solid transparent',
                    }}>
                    &ldquo;{e.q}&rdquo;
                    {i === active && <ChevronDown className="inline-block w-3.5 h-3.5 ml-1 -mt-0.5 align-middle" style={{ color: '#B8912E' }} />}
                  </button>
                  {i < EXCHANGES.length - 1 && (
                    <span aria-hidden="true" className="flex-shrink-0 text-[10px] font-medium italic"
                      style={{ color: 'rgba(115,31,50,0.22)', fontFamily: QUOTE }}>
                      {RULES[i]}
                    </span>
                  )}
                </React.Fragment>
              ))}
            </div>
          </div>
          <div className="max-w-3xl mx-auto mt-6">
            <Detail e={EXCHANGES[active]} />
          </div>
        </div>

        {/* Mobile: quotes stacked, expanding in place — all three always visible */}
        <div className="lg:hidden">
          {EXCHANGES.map((e, i) => (
            <React.Fragment key={e.q}>
              <button onClick={() => setActive(i)}
                className="block w-full text-left text-lg font-medium italic leading-snug cursor-pointer transition-opacity"
                style={{
                  color: '#8B4E78',
                  fontFamily: QUOTE,
                  opacity: i === active ? 1 : INACTIVE,
                  borderBottom: i === active ? '2px solid #D4AF37' : 'none',
                  paddingBottom: i === active ? 6 : 0,
                }}>
                &ldquo;{e.q}&rdquo;
                {i === active && <ChevronDown className="inline-block w-4 h-4 ml-1 -mt-1 align-middle" style={{ color: '#B8912E' }} />}
              </button>
              {i === active && (
                <div className="mt-3">
                  <Detail e={e} />
                </div>
              )}
              {i < EXCHANGES.length - 1 && (
                <p aria-hidden="true" className="text-center text-[10px] font-medium italic py-3.5"
                  style={{ color: 'rgba(115,31,50,0.22)', fontFamily: QUOTE }}>
                  {RULES[i]}
                </p>
              )}
            </React.Fragment>
          ))}
        </div>

        <p className="text-xs font-semibold leading-relaxed mt-10 max-w-2xl" style={{ color: '#6B5B4E' }}>
          Spring 2026 Texas Algebra I results, per the Texas Education Agency:
          82% reached Approaches Grade Level or above, 54% reached Meets Grade Level
          or above, and 30% reached Masters Grade Level.{' '}
          <a
            href="https://tea.texas.gov/data-reports/student-assessment-results/2026-staar-eoc.pdf"
            target="_blank"
            rel="noreferrer"
            className="font-extrabold underline decoration-[#D4AF37] decoration-2 underline-offset-2 hover:opacity-80"
            style={{ color: '#731F32' }}
          >
            Source: TEA Spring 2026 STAAR EOC results.
          </a>
        </p>
      </div>
    </section>
  );
}