/* global React, INK, CREAM, PULSE, GradText, Reveal, SectionHead, SectionShell, SB_EASE, MShell, MHead */
// § 15 — FAQ. One accordion, two renderers (desktop + mobile).

const FAQ_ITEMS = [
  ['Is my likeness safe?', 'Your Character is trained privately on your photos and voice — encrypted, never shared, never blended into anyone else\u2019s model. Delete it and it\u2019s gone.'],
  ['Who owns the content I generate?', 'You do. Every image, video and voice take generated with your Character is yours to publish, sell and license — no royalties, no watermarks.'],
  ['Which platforms does Sozee publish to?', 'The Scheduler posts to OnlyFans, Fanvue, Fansly, Instagram, TikTok, X and Reddit — one queue per Character, each post tagged so you can see what Sozee earned you.'],
  ['How consistent is my Character across generations?', 'Identity is locked at the model level, not the prompt level. Face, body and voice hold across every setting, outfit and shot style — that\u2019s the whole point of training once.'],
  ['What does it cost to start?', 'Nothing. Training your first Character and your first generations are free — no card required. After that, credits: roughly one per image, and video or Live Mode priced by the second.'],
  ['Can I make 18+ content?', 'Yes — on the platforms that allow it, behind age verification, and only with your own verified likeness. Sozee never generates NSFW content of anyone who hasn\u2019t consented with ID.'],
  ['Can I build an AI character from scratch?', 'Yes. The Character Builder casts a persona from zero — origin, skin, eyes, hair, physique, distinctive details — no photos needed. They\u2019re unique to you, and no one else can generate with them.'],
  ['How does Sozee protect me from deepfakes?', 'Training requires ID-verified consent from the person in the photos — nobody can build a Character of you but you. Your model is private and non-exportable, and every generation is invisibly signed so provenance can be proven.'],
  ['Can I manage multiple creators as an agency?', 'Yes. Agency accounts run separate Characters from one dashboard — up to twelve on the standard tier — each with its own wardrobe, voice, queue and per-creator analytics, with roles for your team.'],
];

const FAQRow = ({ q, a, open, onClick, dark = false, compact = false }) => (
  <div onClick={onClick} style={{ borderBottom: '1px solid rgba(28,27,27,0.1)', cursor: 'pointer' }}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, padding: compact ? '16px 2px' : '20px 4px' }}>
      <span style={{ fontSize: compact ? 14 : 17, fontWeight: 700, letterSpacing: '-0.01em', color: INK }}>{q}</span>
      <span style={{ width: compact ? 24 : 28, height: compact ? 24 : 28, borderRadius: '50%', flexShrink: 0, display: 'grid', placeItems: 'center',
        background: open ? PULSE : 'rgb(246,243,242)', boxShadow: open ? '0 6px 16px -4px rgba(104,19,212,0.45)' : 'inset 0 0 0 1px rgba(28,27,27,0.1)',
        transition: `all 0.3s ${SB_EASE}` }}>
        <svg width={compact ? 10 : 11} height={compact ? 10 : 11} viewBox="0 0 16 16" fill="none" style={{ transform: open ? 'rotate(45deg)' : 'none', transition: `transform 0.35s ${SB_EASE}` }}>
          <path d="M8 3v10M3 8h10" stroke={open ? '#fff' : 'rgba(28,27,27,0.6)'} strokeWidth="1.9" strokeLinecap="round"/>
        </svg>
      </span>
    </div>
    <div style={{ display: 'grid', gridTemplateRows: open ? '1fr' : '0fr', transition: `grid-template-rows 0.4s ${SB_EASE}` }}>
      <div style={{ overflow: 'hidden' }}>
        <p style={{ margin: 0, padding: compact ? '0 34px 16px 2px' : '0 46px 22px 4px', fontSize: compact ? 12.5 : 15, lineHeight: 1.6, color: 'var(--text-secondary)' }}>{a}</p>
      </div>
    </div>
  </div>
);

const FAQSection = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <SectionShell>
      <div style={{ maxWidth: 760, margin: '0 auto' }}>
        <SectionHead num="15" center title={<span>Questions,<GradText> answered.</GradText></span>}
          sub="The short version of everything creators ask before they start." />
        <Reveal delay={140}>
          <div style={{ marginTop: 46, borderTop: '1px solid rgba(28,27,27,0.1)' }}>
            {FAQ_ITEMS.map(([q, a], i) => (
              <FAQRow key={i} q={q} a={a} open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />
            ))}
          </div>
        </Reveal>
      </div>
    </SectionShell>
  );
};

const MFAQSection = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <MShell bg="#fff">
      <MHead title={<span>Questions,<GradText> answered.</GradText></span>}
        sub="The short version of everything creators ask before they start." />
      <Reveal delay={140}>
        <div style={{ marginTop: 26, borderTop: '1px solid rgba(28,27,27,0.1)' }}>
          {FAQ_ITEMS.map(([q, a], i) => (
            <FAQRow key={i} q={q} a={a} compact open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </Reveal>
    </MShell>
  );
};

Object.assign(window, { FAQSection, MFAQSection, FAQRow });