/* FAQ: question / answer page with a single-open accordion.
   Uses the site's shared tokens (var(--font-display) headings, var(--font-mono)
   eyebrows via <Eyebrow>, var(--font-sans) body) and theme-aware colours, so
   type and colour match every other page in light and dark mode.
   Comfortable centred reading column. Brand is always written "ViZO". */

const FAQ_GROUPS = [
  {
    label: 'Getting started',
    items: [
      {
        q: 'How does ViZO work?',
        a: "Upload a product image, choose a model and a setting, and ViZO generates studio-quality on-model imagery in minutes. You direct the look (model, environment, styling) and download campaign-ready images, or turn any image into a short motion video. No studio, no reshoots, no waiting weeks."
      },
      {
        q: 'What can I upload?',
        a: "Flat-lays, ghost-mannequin shots, real-mannequin shots, or product images straight from your store or website. If you've got a usable product image, ViZO can work with it."
      },
      {
        q: 'How long does it take?',
        a: "A single image takes around two minutes. Larger batches take longer depending on how many images you're generating, but most are ready within about ten minutes. For very large jobs, see overnight processing below."
      },
      {
        q: 'Can I generate video too?',
        a: "Yes. You can turn any image into a short motion video, with a choice of motion styles, durations, and resolution up to 4K. Each video costs around 30 credits."
      }
    ]
  },
  {
    label: 'Pricing & credits',
    items: [
      {
        q: 'How does pricing work?',
        a: "Every plan includes the same full set of features. Plans differ only in how many credits you get each month. You spend credits when you generate images or video (video uses more, as it needs more computing power)."
      },
      {
        q: 'What are credits, and do they expire?',
        a: "There are two types. Subscription credits come with your monthly plan and roll over for up to two months while your subscription is active; after that they expire. Top-up credits, bought separately, don't expire as long as your account is open. If you cancel, unused subscription credits expire at the end of your billing period."
      },
      {
        q: 'Is there a free trial?',
        a: "Yes, a 14-day free trial with 20 free credits, so you can try ViZO properly before committing. At the end of the trial, your plan automatically continues as a paid subscription unless you cancel beforehand, and you can cancel any time during the trial from your account. We'll always make the price and start date clear before your trial begins."
      }
    ]
  },
  {
    label: 'Batch processing',
    items: [
      {
        q: 'Can I process a whole catalogue at once?',
        a: "Yes. ViZO is built for volume, so you can run batches of several hundred products in one go rather than generating them one at a time. Batch processing is designed for e-commerce catalogues, where you want consistent, on-model imagery across many products quickly. For editorial or campaign work that needs finer art direction, the single-image flow gives you more control over each shot."
      },
      {
        q: 'Can I process a whole catalogue overnight?',
        a: "Yes. Overnight processing is built for large batches, a full catalogue or a whole season. Submit your batch, choose the model, environment and accessories, set a creative brief for your brand, and ViZO generates the images for you, ready within 24 hours. Overnight processing also costs 50% less per image, so an image that normally costs 2 credits costs just 1."
      }
    ]
  },
  {
    label: 'Rights, models & data',
    items: [
      {
        q: 'Do I own the images I create?',
        a: "Yes. You own and hold the full commercial rights to the imagery you generate with ViZO, to use for ads, your store, social, anywhere. There are no ongoing usage fees and your rights don't expire."
      },
      {
        q: 'Are the models real people?',
        a: "Our standard AI models are entirely computer-generated; they don't depict any real, identifiable person. If you use our Digital Twin feature to create a likeness of a real person (yourself or your own team), that's only ever done with their explicit consent. And we never use your uploads or generated images to train our AI models. Your content stays yours."
      },
      {
        q: "What's your refund policy?",
        a: "Subscriptions and credits are non-refundable, including credits you've already used. You can cancel any time and keep access until the end of your current billing period. This doesn't affect your legal rights if something's genuinely wrong with the service."
      },
      {
        q: 'How do you handle my data?',
        a: <>We process your uploads only to provide the service, and we don't use your content to train our AI. For the full detail on what we collect and how we protect it, see our <Link to="/privacy-policy" style={{ color: 'var(--ink)', textDecoration: 'underline', textUnderlineOffset: '2px' }}>Privacy Policy</Link>.</>
      }
    ]
  }
];

/* ---- One accordion row (smooth expand/collapse via grid-template-rows) ---- */
function FAQItem({ q, a, open, onToggle }) {
  return (
    <div style={{ borderBottom: '1px solid var(--bone)' }}>
      <button onClick={onToggle} aria-expanded={open} style={{
        width: '100%', background: 'transparent', border: 'none', cursor: 'pointer',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20,
        padding: 'clamp(20px, 2.4vw, 28px) 0', textAlign: 'left', color: 'var(--ink)'
      }}>
        <span style={{
          fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 'clamp(18px, 1.9vw, 24px)', lineHeight: 1.3, letterSpacing: '-0.01em', color: 'var(--ink)'
        }}>{q}</span>
        <span aria-hidden="true" style={{
          flex: '0 0 auto', display: 'inline-flex', color: 'var(--graphite)',
          transition: 'transform 260ms var(--ease-standard)', transform: open ? 'rotate(45deg)' : 'rotate(0deg)'
        }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>
        </span>
      </button>
      <div style={{
        display: 'grid',
        gridTemplateRows: open ? '1fr' : '0fr',
        transition: 'grid-template-rows 320ms var(--ease-standard)'
      }}>
        <div style={{ overflow: 'hidden' }}>
          <p style={{
            margin: 0, paddingBottom: 'clamp(22px, 2.6vw, 30px)', maxWidth: '64ch',
            fontFamily: 'var(--font-sans)', fontSize: 'clamp(15px, 1.15vw, 18px)', lineHeight: 1.7,
            color: 'var(--graphite)',
            opacity: open ? 1 : 0, transition: 'opacity 240ms var(--ease-standard)'
          }}>{a}</p>
        </div>
      </div>
    </div>);
}

/* ---- Page ---- */
function FAQPage() {
  // Single-open accordion: only one key open at a time (null = all closed).
  const [openKey, setOpenKey] = React.useState(null);
  const toggle = (k) => setOpenKey((cur) => (cur === k ? null : k));

  React.useEffect(() => {
    const prev = document.title;
    document.title = 'FAQ — ViZO Studio';
    window.scrollTo({ top: 0, behavior: 'instant' });
    return () => { document.title = prev; };
  }, []);

  return (
    <div data-screen-label="FAQ">
      {/* 1. Hero */}
      <section style={{ background: 'var(--paper)', padding: 'clamp(88px, 13vw, 168px) var(--pad-x) clamp(40px, 6vw, 72px)' }}>
        <div style={{ maxWidth: 880, margin: '0 auto' }}>
          <Eyebrow>FAQ</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 300,
            fontSize: 'clamp(40px, 6.4vw, 84px)', lineHeight: 1.04, letterSpacing: '-0.04em',
            color: 'var(--ink)', margin: '24px 0 0'
          }}>
            Questions, answered.
          </h1>
          <p style={{
            marginTop: 'clamp(20px, 3vw, 30px)', fontFamily: 'var(--font-sans)',
            fontSize: 'clamp(17px, 1.5vw, 21px)', lineHeight: 1.6, color: 'var(--graphite)', maxWidth: '48ch'
          }}>
            Everything you need to know about how ViZO works, pricing, and your rights.
          </p>
        </div>
      </section>

      {/* 2. FAQ accordions (single-open) */}
      <section style={{ background: 'var(--paper)', padding: '0 var(--pad-x) clamp(72px, 11vw, 128px)' }}>
        <div style={{ maxWidth: 880, margin: '0 auto' }}>
          {FAQ_GROUPS.map((group, gi) =>
            <div key={group.label} style={{ marginTop: gi === 0 ? 0 : 'clamp(44px, 6vw, 72px)' }}>
              <Eyebrow>{group.label}</Eyebrow>
              <div style={{ marginTop: 'clamp(8px, 1.4vw, 16px)', borderTop: '1px solid var(--bone)' }}>
                {group.items.map((it, ii) => {
                  const key = gi + '-' + ii;
                  return <FAQItem key={key} q={it.q} a={it.a} open={openKey === key} onToggle={() => toggle(key)} />;
                })}
              </div>
            </div>
          )}
        </div>
      </section>

      {/* 3. Closing prompt */}
      <section style={{ background: 'var(--canvas)', padding: 'clamp(80px, 12vw, 152px) var(--pad-x)', textAlign: 'center' }}>
        <div style={{ maxWidth: 640, margin: '0 auto' }}>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontSize: 'clamp(30px, 4.8vw, 52px)', lineHeight: 1.08, letterSpacing: '-0.03em',
            color: 'var(--ink)', margin: 0
          }}>
            Still have a question?
          </h2>
          <p style={{
            margin: 'clamp(18px, 2.6vw, 26px) auto 0', fontFamily: 'var(--font-sans)',
            fontSize: 'clamp(16px, 1.4vw, 19px)', lineHeight: 1.65, color: 'var(--graphite)', maxWidth: '46ch'
          }}>
            We're happy to help. Get in touch and we'll get back to you.
          </p>
          <div style={{ marginTop: 'clamp(28px, 4vw, 40px)', display: 'flex', justifyContent: 'center' }}>
            <Link to="/contact"><Button variant="primary" size="large" arrow>Contact us</Button></Link>
          </div>
        </div>
      </section>
    </div>);
}

Object.assign(window, { FAQPage });