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

/* ============== WHY US ============== */
function WhyUs() {
  const items = [
    { num: '10+', label: 'Years of expertise', desc: 'In strategic marketing, technology, 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 · 06</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: 'How does the monthly subscription work?',
    a: 'You pick a tier and receive a set bundle of deliverables every month for one flat PHP rate — social content, GIFs, videos and more, all-inclusive of two revision rounds. Up to 4 unused pieces roll over to the next cycle, and you can adjust, pause or cancel your plan between cycles. It\'s built for brands that need consistent output month after month, without renegotiating scope every time.',
  },
  {
    q: 'Can I order one-off services without subscribing?',
    a: 'Yes. If you only need the occasional piece, use "Price per output" and pay per deliverable — no monthly commitment. Static posts and materials start at ₱4,500 and short video animations at ₱5,000, with the same senior team and the same two revision rounds. You buy exactly what you need, when you need it, and can move to a subscription later if the volume grows.',
  },
  {
    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: 'How do you work so fast?',
    a: 'A lean, senior team and a modern toolkit. Instead of routing your project through layers of account managers and junior staff, you work directly with people who\'ve done this for years — and we lean on the right tools to handle the grunt work so we can focus on the calls that matter. Most first drafts land within 48 hours.',
  },
  {
    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 custom website, an internal business system, a mobile app, or a commercial space — creative or technology, 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 · 07</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 });