/* global React */
const { useState: useState3 } = React;

/* ============== WHY US ============== */
function WhyUs() {
  const items = [
    { num: '10+', label: 'Years of expertise', desc: 'In strategic marketing, account and project management.' },
    { num: '15', label: 'Years combined', desc: 'Across the partners leading every project at Giant Peach.' },
    { num: '4', label: 'Industries deep', desc: 'Food & beverage, financial services, design, technology.' },
    { num: '100%', label: 'Filipino talent', desc: 'Every artist on our roster is paid fairly, every time.' },
  ];
  return (
    <section className="gp-section" style={{ paddingTop: 0 }}>
      <div className="gp-shell">
        <div className="gp-section-head">
          <div>
            <span className="gp-eyebrow">Why choose us · 04</span>
            <h2 className="gp-display gp-display-lg" style={{ marginTop: 16 }}>
              A decade of expertise,<br />priced for the long run.
            </h2>
          </div>
          <p>We've spent a combined 15 years inside marketing departments and agencies — and we've taken every shortcut so you don't have to.</p>
        </div>
        <div className="gp-why">
          {items.map((i) => (
            <div key={i.label} className="gp-why-card">
              <div className="num">{i.num}</div>
              <div>
                <h4>{i.label}</h4>
                <p style={{ marginTop: 6 }}>{i.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============== PORTFOLIO (needs real case studies) ============== */
function Portfolio() { return null; }

/* ============== TESTIMONIALS (needs real client quotes) ============== */
function Testimonials() { return null; }

/* ============== FAQ ============== */
const FAQS = [
  {
    q: 'How fast is the turnaround?',
    a: 'Most static posts and marketing materials are delivered within 48 hours. GIFs and short video animations take 3–5 business days. We confirm the exact timeline when you send your brief — and we stick to it.',
  },
  {
    q: 'Can I roll over unused deliverables?',
    a: 'Yes — up to 4 unused pieces roll over to the following month. Rollovers don\'t accumulate beyond one cycle, so the best strategy is a consistent posting schedule we build together.',
  },
  {
    q: 'Can I mix and match services across tiers?',
    a: 'Absolutely. Our subscription tiers are a starting point, not a box. Use the quote calculator to build exactly the mix you need — static posts, GIFs, videos, copywriting — and we\'ll confirm pricing within a day.',
  },
  {
    q: 'How many revisions are included?',
    a: 'Every deliverable includes two rounds of revisions at no extra cost. We rarely need them — but they\'re there. Additional revision rounds after that are available at a flat rate.',
  },
  {
    q: 'Are your artists really based in the Philippines?',
    a: '100%. Every creative on our roster is Filipino, personally vetted, and paid above-market rates. That\'s the whole point — exceptional talent, fairly compensated, on a global stage.',
  },
  {
    q: 'What if I need something that isn\'t listed?',
    a: 'Just reach out. Whether it\'s a brand refresh, a product launch campaign, a pitch deck, or a one-off event banner — if it\'s creative work, we can scope it. No brief is too niche.',
  },
];

function FAQ() {
  const [open, setOpen] = useState3(-1);
  return (
    <section id="faq" className="gp-section">
      <div className="gp-shell">
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <span className="gp-eyebrow">FAQ · 05</span>
          <h2 className="gp-display gp-display-lg" style={{ marginTop: 16 }}>
            Questions, answered.
          </h2>
        </div>
        <div className="gp-faq">
          {FAQS.map((f, i) => (
            <div key={i} className={'gp-faq-item' + (open === i ? ' open' : '')}>
              <button className="gp-faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="icon">+</span>
              </button>
              <div className="gp-faq-a">
                <p>{f.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WhyUs, Portfolio, Testimonials, FAQ });