/* FAQ section for the Rep by Rep marketing site.
   Accordion-style. Eight curated Q&As in JP's voice. */

const FAQS = [
  {
    q: "What if I'm too far gone / too old / haven't trained seriously in years?",
    a: "If you're 30+ and asking that question, you're exactly who I built this for. We start where you are, not where you wish you were. The first six weeks rebuild capacity — strength, conditioning, sleep, nutrition basics. To be clear, I didn't step on a competitive stage until I was 44. You're not too old. Your best physique is still ahead of you. That's not a sales line; that's biology.",
  },
  {
    q: "How is this different from a generic program I could buy off the shelf?",
    a: "A program in a PDF is built for nobody. It can't see your sleep, your stress, your shoulder, your week. It can't tell you to swap deadlifts for a week because your lower back is fighting for its life. Coaching adjusts in real time — that's what you pay for. If your training was working without that, you wouldn't be reading this.",
  },
  {
    q: "What if I travel a lot for work?",
    a: "Most of my clients travel, and I travel for work too. Every program ships with a substitution library — hotel gym, home gym, hotel room with a band. We plan around your travel weeks, not in spite of them. Send me your schedule and we build it in.",
  },
  {
    q: "What equipment do I need?",
    a: "Whatever you have. A commercial gym is ideal but a barbell, a bench, and a rack is enough. Some of my clients run home setups with adjustable dumbbells and a cable tower. We program around what's available — we don't pretend you have access to gear you don't.",
  },
  {
    q: "What if I have an injury or something I can't train around?",
    a: "Tell me about it on the intake call. I've programmed around torn rotator cuffs, two herniated discs, a hip replacement, and post-shoulder-surgery rehab. We don't grit our teeth through pain — we program around it and rebuild what we can. Some movements come off the table; the work doesn't stop.",
  },
  {
    q: "How does the weekly check-in actually work?",
    a: "Once you join the team, you'll be given a check-in day and time. Each week on that day you submit: four photos (front, side, back, legs), your 7-day average bodyweight, sleep hours, soreness scale, and any notes. I review the trend and get back to you ASAP with feedback and any training or macro adjustments. Five minutes of your time, real coaching back.",
  },
  {
    q: "How do I know if I'm a fit for Contest Prep?",
    a: "If you have to ask, you're probably not ready yet — and that's not an insult. Contest Prep requires a strong baseline: years of consistent training, a maintenance bodyweight you can hold, and the schedule to commit 20+ weeks. The application call is where we decide together. If you're not there yet, I'd rather keep you on Training + Nutrition and build the base — for as long as it takes — than start a prep that won't go well. The goal is your best show, not your first show.",
  },
  {
    q: "Can I cancel anytime?",
    a: "Straight answer: not in the first three months. Coaching is a three-month commitment up front, because that's the minimum honest window to build a base and see real change. Two weeks doesn't tell us anything. After those three months, you're month-to-month and you cancel yourself, anytime, right from your account. One tap. No emails, no chatbots, no retention scripts, no hoops. If it's not for you, it's not for you. The work should keep you here, not a cancellation wall.",
  },
];

const FAQItem = ({ q, a, isOpen, onToggle }) => (
  <div style={{
    borderBottom: '1px solid var(--border)',
  }}>
    <button
      onClick={onToggle}
      style={{
        width: '100%',
        background: 'transparent',
        border: 0,
        padding: '24px 0',
        textAlign: 'left',
        cursor: 'pointer',
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'space-between',
        gap: 24,
        fontFamily: 'var(--font-headline)',
        color: 'var(--fg)',
      }}
    >
      <span style={{
        fontFamily: 'var(--font-headline)',
        fontWeight: 600,
        fontSize: 20,
        textTransform: 'uppercase',
        letterSpacing: '0.02em',
        lineHeight: 1.25,
        color: isOpen ? 'var(--accent)' : 'var(--fg)',
        transition: 'color 200ms cubic-bezier(.16,1,.3,1)',
      }}>{q}</span>
      <span style={{
        flexShrink: 0,
        marginTop: 4,
        transition: 'transform 300ms cubic-bezier(.16,1,.3,1)',
        transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
        color: isOpen ? 'var(--accent)' : 'var(--fg-3)',
      }}>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round">
          <line x1="12" y1="5" x2="12" y2="19" />
          <line x1="5" y1="12" x2="19" y2="12" />
        </svg>
      </span>
    </button>
    <div style={{
      maxHeight: isOpen ? 400 : 0,
      overflow: 'hidden',
      transition: 'max-height 300ms cubic-bezier(.16,1,.3,1)',
    }}>
      <p style={{
        fontSize: 16,
        lineHeight: 1.65,
        color: 'var(--fg-2)',
        margin: 0,
        padding: '0 0 28px',
        maxWidth: '66ch',
      }}>{a}</p>
    </div>
  </div>
);

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq">
      <div className="wrap">
        <div className="eyebrow">FAQ</div>
        <h2 className="h-section" style={{ marginTop: 12 }}>Questions, answered honestly.</h2>
        <div className="rule" />
        <div style={{
          marginTop: 48,
          borderTop: '1px solid var(--border)',
          maxWidth: 880,
        }}>
          {FAQS.map((f, i) => (
            <FAQItem
              key={i}
              q={f.q}
              a={f.a}
              isOpen={open === i}
              onToggle={() => setOpen(open === i ? -1 : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { FAQ });