/* sections.jsx — About, Work, Testimonials, FAQ, Footer. Exports Sections to window. */
const { useState: useStateS, useEffect: useEffectS } = React;

/* ---------- Overtime Gaming — origin story ---------- */
function OtStat({ n, l }) {
  return (
    <div className="ot-stat">
      <div className="ot-stat-n">{n}</div>
      <div className="ot-stat-l faint">{l}</div>
    </div>);

}

function OvertimeFeature() {
  return (
    <section className="section overtime" id="overtime">
      <div className="wrap ot-grid">
        <div className="ot-left">
          <h2 className="h2 reveal" data-d="1" style={{ textAlign: "left", maxWidth: "13ch", textWrap: "balance" }}>I built Overtime Gaming from a bedroom at 14</h2>
          <div className="ot-stats reveal" data-d="3">
            <OtStat n={<window.CountUp end={2} suffix="M+" />} l="followers across platforms" />
            <span className="stat-div" aria-hidden="true"></span>
            <OtStat n={<window.CountUp end={14} />} l="the age I started it" />
            <span className="stat-div" aria-hidden="true"></span>
            <OtStat n="Sold" l="acquired by Overtime" />
          </div>
        </div>
        <a className="ot-logo reveal" data-d="2" href="https://linktr.ee/overtimegaming"
        target="_blank" rel="noopener noreferrer" aria-label="Visit Overtime Gaming">
          <span className="ot-logo-glow" aria-hidden="true"></span>
          <img className="ot-logo-img ot-logo-img--light" src="assets/overtime-light.png" alt="Overtime Gaming" />
          <img className="ot-logo-img ot-logo-img--dark" src="assets/overtime-dark.png" alt="" aria-hidden="true" />
        </a>
      </div>
    </section>);

}

/* ---------- Testimonials ---------- */
const TESTIMONIALS = [
{
  quote: "Roan has been working over a decade from a young age and has helped me build my skills in content strategy, production, planning, scripting, editing, thumbnail composition and design. He's extremely knowledgeable and I do recommend working with him.",
  name: "Slite",
  role: "Creator",
  photo: "assets/slite.jpg"
},
{
  quote: "Dedicated, organized, and has a mind for YouTube and content. Great working with him.",
  name: "StoneMountain64",
  role: "Creator",
  photo: "assets/stone.jpg"
},
{
  quote: "Roan was great to work with and always went above and beyond. Couldn't recommend him enough.",
  name: "BennyCentral",
  role: "Creator",
  photo: "assets/benny.jpg"
},
{
  quote: "Roan is the goat.",
  name: "Jacko",
  role: "VP of Product, Overtime",
  photo: "assets/jacko.jpg"
},
{
  quote: "Roan is one of the most tuned in people I know when it comes to content & building teams.",
  name: "Stephen Ellis",
  role: "CEO, Zygo Media",
  photo: "assets/stephen.jpg"
},
{
  quote: "Roan was great to work with and very reliable.",
  name: "Richard Bowen",
  role: "Executive Producer, Red Bull Gaming",
  photo: "assets/richard.jpg"
},
{
  quote: "Roan has been my go-to guy for questions regarding content for the last 6 years. Highly recommend.",
  name: "Bálint Kiss-Tóth",
  role: "Talent Manager, Ziggurat XYZ",
  photo: "assets/balint.jpg"
},
{
  quote: "Roan was always eager to help — he gave me clarity on what the next steps were for me on YouTube.",
  name: "JCC",
  role: "Creator",
  photo: "assets/jcc.jpg"
}];


function TstCard({ t, feature, d, marquee }) {
  return (
    <figure className={"tst-card" + (marquee ? " tst-card--mq" : " reveal") + (feature ? " tst-card--feature" : "")} data-d={d}>
      <blockquote className="tst-quote">{t.quote}</blockquote>
      <figcaption className="tst-by">
        {t.photo ?
        <img className="tst-avatar tst-avatar--img" src={t.photo} alt={t.name} loading="lazy" /> :
        <span className="tst-avatar" aria-hidden="true">{t.name[0]}</span>
        }
        <span className="stack">
          <span className="tst-name">{t.name}</span>
          <span className="tst-role faint">{t.role}</span>
        </span>
      </figcaption>
    </figure>);

}

/* Layout A — feature card + stacked column (default) */
function TstFeature() {
  return (
    <div className="tst-grid">
      <TstCard t={TESTIMONIALS[0]} feature d={1} />
      <div className="tst-stack">
        <TstCard t={TESTIMONIALS[1]} d={2} />
        <TstCard t={TESTIMONIALS[2]} d={3} />
        <TstCard t={TESTIMONIALS[3]} d={4} />
      </div>
    </div>);

}

/* Layout B — even quad grid */
function TstQuad() {
  return (
    <div className="tst-quad">
      {TESTIMONIALS.map((t, i) => <TstCard key={i} t={t} d={(i % 3) + 1} />)}
    </div>);

}

/* Layout C — auto-scrolling wall */
function TstMarquee() {
  const row = [...TESTIMONIALS, ...TESTIMONIALS];
  return (
    <div className="tst-marquee" aria-label="What people say">
      <div className="tst-marquee-track">
        {row.map((t, i) => <TstCard key={i} t={t} d={1} marquee />)}
      </div>
    </div>);

}

/* Layout D — rotating spotlight, arrow-navigated */
function TstSpotlight() {
  const [i, setI] = useStateS(0);
  const [paused, setPaused] = useStateS(false);
  const total = TESTIMONIALS.length;
  const go = (d) => setI((p) => (p + d + total) % total);
  useEffectS(() => {
    if (paused) return undefined;
    const id = setTimeout(() => setI((p) => (p + 1) % total), 5600);
    return () => clearTimeout(id);
  }, [paused, i, total]);
  const chev = (left) => (
    <svg className="tst-chev" viewBox="0 0 24 44" fill="none" aria-hidden="true">
      <path d={left ? "M18 4 L7 22 L18 40" : "M6 4 L17 22 L6 40"}
        stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
  return (
    <div className="tst-spotlight reveal"
      tabIndex={0}
      onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}
      onKeyDown={(e) => {
        if (e.key === "ArrowLeft") { e.preventDefault(); go(-1); }
        if (e.key === "ArrowRight") { e.preventDefault(); go(1); }
      }}>
      <button className="tst-arrow tst-arrow--prev" onClick={() => go(-1)} aria-label="Previous testimonial">{chev(true)}</button>
      <div className="tst-spot-stage">
        {TESTIMONIALS.map((p, idx) => (
          <div key={idx} className={"tst-spot-slide" + (idx === i ? " active" : "")} aria-hidden={idx !== i}>
            <blockquote className="tst-spot-quote">{p.quote}</blockquote>
            <div className="tst-spot-by">
              {p.photo ?
              <img className="tst-avatar tst-avatar--img tst-spot-av" src={p.photo} alt={p.name} /> :
              <span className="tst-avatar tst-spot-av" aria-hidden="true">{p.name[0]}</span>}
              <span className="stack">
                <span className="tst-name">{p.name}</span>
                <span className="tst-role faint">{p.role}</span>
              </span>
            </div>
          </div>
        ))}
      </div>
      <button className="tst-arrow tst-arrow--next" onClick={() => go(1)} aria-label="Next testimonial">{chev(false)}</button>
    </div>);

}

function Testimonials({ variant = "feature" }) {
  let inner;
  if (variant === "grid") inner = <TstQuad />;
  else if (variant === "marquee") inner = <TstMarquee />;
  else if (variant === "spotlight") inner = <TstSpotlight />;
  else inner = <TstFeature />;
  return (
    <section className={"section testimonials tst--" + variant} id="testimonials">
      {variant === "marquee" ? inner : <div className="wrap">{inner}</div>}
    </section>);

}

/* ---------- FAQ ---------- */
const FAQS = [
{ q: "What actually happens on a call?", a: "We get on a live video call and go deep on whatever you need — channel strategy, packaging, scripting, direction, or the bigger-picture stuff. Come with questions or a problem; you'll leave with a clear, specific plan. No fluff." },
{ q: "Who is this for?", a: "Established creators scaling up, and brands or businesses serious about YouTube. If you're already making content and want to get more views, make more money, and think more clearly about the work, this is for you. Or if you're just starting and want to hit the ground running." },
{ q: "How does booking and payment work?", a: "Pick the session that fits, choose an open time slot, enter your details and pay securely on this site. You'll get an instant confirmation and the call lands straight on both our calendars." },
{ q: "Does it sync to my calendar?", a: "Yes. Once booked, the session is added to my Google Calendar and you'll receive a calendar invite with the video link, so it's locked in for both of us." },
{ q: "What if I need to reschedule?", a: "Life happens. You can reschedule from your confirmation email up to 24 hours before the call." },
{ q: "What if I need something more bespoke?", a: <React.Fragment>If you need something more bespoke than the options given, reach out to me at <a className="faq-link" href="mailto:roandavies2@gmail.com">roandavies2@gmail.com</a> or on my <a className="faq-link" href="https://x.com/roandavies" target="_blank" rel="noopener noreferrer">Twitter</a>/<a className="faq-link" href="https://www.linkedin.com/in/roan-davies-05005a176/" target="_blank" rel="noopener noreferrer">LinkedIn</a>.</React.Fragment> }];


function FAQItem({ item, open, onToggle, i }) {
  return (
    <div className={"faq-item reveal" + (open ? " open" : "")} data-d={i % 3 + 1}>
      <button className="faq-q" onClick={onToggle} aria-expanded={open}>
        <span className="faq-q-txt">{item.q}</span>
        <span className="faq-icon" aria-hidden="true"></span>
      </button>
      <div className="faq-a-wrap" style={{ gridTemplateRows: open ? "1fr" : "0fr" }}>
        <div className="faq-a-inner"><p className="faq-a muted">{item.a}</p></div>
      </div>
    </div>);

}

function FAQ() {
  const [open, setOpen] = useStateS(-1);
  return (
    <section className="section" id="faq">
      <div className="wrap faq-grid">
        <div className="faq-left">
          <h2 className="h2 reveal" data-d="1">Questions,<br />answered.</h2>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) =>
          <FAQItem key={i} i={i} item={f} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Closing CTA + Footer ---------- */
function Footer({ onBook, ctaAnim = "underline" }) {
  return (
    <footer className="footer" id="contact">
      <div className="wrap">
        <div className="footer-cta reveal">
          <button className={"footer-cta-btn fcta--" + ctaAnim} onClick={onBook} aria-label="Let's get to work — book a consultation">
            <h2 className="display footer-head">
              Let's get to<br /><span className="fcta-word">work.<span className="footer-cta-arrow" aria-hidden="true">↗</span></span>
            </h2>
          </button>
        </div>
        <hr className="rule footer-rule" />
        <div className="footer-bottom">
          <div className="nav-logo footer-logo"><span className="mark" aria-hidden="true"></span></div>
          <div className="footer-meta faint">
            <span>roandavies.com</span>
            <span className="footer-dot">·</span>
            <span>Content &amp; YouTube Strategy</span>
          </div>
          <div className="footer-social">
            <a href="https://x.com/roandavies" target="_blank" rel="noopener noreferrer" aria-label="X / Twitter">X / Twitter</a>
            <a href="https://www.linkedin.com/in/roan-davies-05005a176/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">LinkedIn</a>
          </div>
        </div>
        <p className="footer-fine faint">© {new Date().getFullYear()} Roan Davies. All rights reserved.</p>
      </div>
    </footer>);

}

Object.assign(window, { Testimonials, FAQ, Footer, OvertimeFeature });