/* global React, INK, CREAM, PULSE, GENS, GradText, Reveal, useReveal, SB_EASE, MShell, MHead */
// Shared across Brands solutions pages (Brand Portal, UGC Campaigns): brand FAQ + creator-side feature rack.
const BRAND_FAQ = [
['How is this different from an influencer marketplace?', 'You don\u2019t source, DM or negotiate. Stock the portal with products, set the terms, and the creator network opts in — every post is rendered in the studio, verified on publish, and priced by performance, not promises.'],
['Do I ship samples to creators?', 'Never. Your products live in a digital object library synced to every accepted creator\u2019s studio; generations render them pixel-consistent. No shipping, no returns, no lost packages.'],
['How do I know a post actually went live?', 'Publishing runs through Sozee\u2019s scheduler, so \u201cposted\u201d is a platform fact — timestamped and linked. Reporting reads from the same pipeline; nothing is self-reported or screenshotted.'],
['What if content misrepresents my brand?', 'Turn on pre-approval and nothing publishes without your sign-off. Anything live can be flagged — not my product, off-brand, undisclosed ad — and spend is held while our trust team reviews.'],
['How do payouts to creators work?', 'One escrowed charge from you. Creators are paid automatically when their post verifies; missed deliverables return to your balance. No invoices, no wires, no tax-form folder.'],
['Who are the creators?', 'Verified Sozee creators — real people who run their likeness through the studio, plus disclosed AI personas. Every account is identity-verified and every post carries the required disclosures.']];

const BrandFAQSection = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ background: CREAM, padding: '110px 56px' }}>
      <div style={{ maxWidth: 760, margin: '0 auto' }}>
        <div style={{ textAlign: 'center' }}>
          <Reveal delay={90}>
            <h2 style={{ font: '800 52px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 18px' }}>
              Questions<GradText> brands ask.</GradText>
            </h2>
          </Reveal>
          <Reveal delay={170}>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 auto', maxWidth: 480 }}>
              The short version of everything brands ask before a first campaign.
            </p>
          </Reveal>
        </div>
        <Reveal delay={240}>
          <div style={{ marginTop: 46, borderTop: '1px solid rgba(28,27,27,0.1)' }}>
            {BRAND_FAQ.map(([q, a], i) =>
            <window.FAQRow key={i} q={q} a={a} open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />
            )}
          </div>
        </Reveal>
      </div>
    </section>);

};

const MBrandFAQSection = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <MShell>
      <MHead title={<span>Questions<GradText> brands ask.</GradText></span>}
      sub="The short version of everything brands ask before a first campaign." />
      <Reveal delay={140}>
        <div style={{ marginTop: 26, borderTop: '1px solid rgba(28,27,27,0.1)', textAlign: 'left' }}>
          {BRAND_FAQ.map(([q, a], i) =>
          <window.FAQRow key={i} q={q} a={a} compact open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />
          )}
        </div>
      </Reveal>
    </MShell>);

};

// ---------- The creator side — what the network shoots with ----------
const CS_FEATS = [
{ t: 'Photo Control', d: 'Room, outfit and product locked across every photo — your product never drifts.', href: '/photo-control', kind: 'pc' },
{ t: 'Create Image', d: 'Studio-grade sets from one sentence — six variants per take.', href: '/create-image', kind: 'ci' },
{ t: 'Create Video', d: 'Reels with motion control and the creator\u2019s own voice.', href: '/create-video', kind: 'cv' },
{ t: 'Post & Analyze', d: 'The queue that publishes — and the pipeline your reporting reads.', href: '/post-analyze', kind: 'pa' }];

const CSMedia = ({ kind }) =>
<div style={{ height: 118, background: 'rgb(246,243,242)', padding: 10, boxSizing: 'border-box', display: 'grid', placeItems: 'stretch' }}>
    {kind === 'pc' &&
  <div style={{ whiteSpace: 'nowrap', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
        {[['assets/control/collar-silver.png', 'Product', 'contain'], ['assets/garments/top-velvet-emerald.webp', 'Outfit', 'contain'], ['assets/shoot/set-2.webp', 'Locked ✓', 'cover']].map(([src, l, fit]) =>
    <span key={l} style={{ position: 'relative', borderRadius: 8, overflow: 'hidden', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)' }}>
            <img loading="lazy" decoding="async" src={src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: fit, objectPosition: fit === 'cover' ? 'center 16%' : 'center', padding: fit === 'contain' ? 6 : 0, boxSizing: 'border-box' }} />
            <span style={{ position: 'absolute', left: 4, bottom: 4, fontSize: 7, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', borderRadius: 9999, padding: '2px 6px' }}>{l}</span>
          </span>)}
      </div>}
    {kind === 'ci' &&
  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
        {[1, 4, 5].map((n) =>
    <span key={n} style={{ position: 'relative', borderRadius: 8, overflow: 'hidden' }}>
            <img loading="lazy" decoding="async" src={`assets/shoot/set-${n}.webp`} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 16%' }} />
          </span>)}
      </div>}
    {kind === 'cv' &&
  <div style={{ position: 'relative', borderRadius: 8, overflow: 'hidden' }}>
        <img loading="lazy" decoding="async" src="assets/shoot/set-6.webp" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 22%' }} />
        <span style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
          <span style={{ width: 30, height: 30, borderRadius: '50%', background: 'rgba(255,255,255,0.92)', display: 'grid', placeItems: 'center', boxShadow: '0 6px 16px rgba(28,27,27,0.3)' }}>
            <svg width="10" height="10" viewBox="0 0 12 12"><path d="M3.5 2.2v7.6L10 6z" fill={INK} /></svg></span>
        </span>
        <span style={{ position: 'absolute', left: 6, bottom: 6, fontSize: 7, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', borderRadius: 9999, padding: '2px 7px' }}>0:14 · her voice</span>
      </div>}
    {kind === 'pa' &&
  <div style={{ display: 'flex', flexDirection: 'column', gap: 5, justifyContent: 'center' }}>
        {[['IG Reel', 'Tonight · 9:00 PM', '#E1306C'], ['TikTok', 'Fri · 7:30 PM', '#1C1B1B'], ['Fanvue', 'Sat · 10:00 AM', '#813CED']].map(([p, t, c]) =>
    <span key={p} style={{ display: 'flex', alignItems: 'center', gap: 6, borderRadius: 8, background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', padding: '6px 8px' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: c, flexShrink: 0 }} />
            <span style={{ fontSize: 8.5, fontWeight: 700, color: INK, flex: 1 }}>{p}</span>
            <span style={{ fontSize: 8, fontWeight: 600, color: 'rgba(28,27,27,0.5)' }}>{t}</span>
            <span style={{ fontSize: 7.5, fontWeight: 700, color: '#15803D' }}>✓</span>
          </span>)}
      </div>}
  </div>;


const CreatorSideSection = () =>
<section style={{ background: '#fff', padding: '110px 56px' }}>
    <div style={{ maxWidth: 1140, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 46 }}>
        <Reveal delay={90}>
          <h2 style={{ font: '800 52px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 18px' }}>
            Why the content<br /><GradText>is this good.</GradText>
          </h2>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 auto', maxWidth: 540 }}>
            Every creator in the network runs the same studio. What your campaign gets isn’t phone-camera luck — it’s these tools, pointed at your product.
          </p>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {CS_FEATS.map((f, i) =>
      <Reveal key={f.t} delay={i * 90} y={24}>
            <a href={f.href} style={{ display: 'block', borderRadius: 16, overflow: 'hidden', background: CREAM, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', color: 'inherit',
          transform: `rotate(${i % 2 ? 0.8 : -0.8}deg)` }}>
              <CSMedia kind={f.kind} />
              <div style={{ padding: '14px 16px 18px' }}>
                <div style={{ fontSize: 14.5, fontWeight: 700, letterSpacing: '-0.01em', color: INK, marginBottom: 5 }}>{f.t}</div>
                <div style={{ fontSize: 11.5, lineHeight: 1.5, color: 'var(--text-secondary)', marginBottom: 9 }}>{f.d}</div>
                <span style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--brand-purple-700)' }}>See the feature →</span>
              </div>
            </a>
          </Reveal>)}
      </div>
    </div>
  </section>;


const MCreatorSideSection = () =>
<MShell bg="#fff">
    <MHead title={<span>Why the content<br /><GradText>is this good.</GradText></span>}
  sub="Every creator in the network runs the same studio — pointed at your product." />
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 26 }}>
      {CS_FEATS.map((f, i) =>
    <Reveal key={f.t} delay={i * 80} y={18}>
          <a href={f.href.replace('.html', '.html')} style={{ display: 'flex', gap: 11, alignItems: 'center', borderRadius: 14, background: CREAM, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 10, color: 'inherit', textAlign: 'left',
        transform: `rotate(${i % 2 ? 0.7 : -0.7}deg)` }}>
            <span style={{ width: 64, height: 64, borderRadius: 10, overflow: 'hidden', flexShrink: 0, position: 'relative', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)' }}>
              <img loading="lazy" decoding="async" src={f.kind === 'pc' ? 'assets/control/collar-silver.png' : f.kind === 'ci' ? 'assets/shoot/set-1.webp' : f.kind === 'cv' ? 'assets/shoot/set-6.webp' : 'assets/shoot/set-4.webp'}
          alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: f.kind === 'pc' ? 'contain' : 'cover', objectPosition: f.kind === 'pc' ? 'center' : 'center 16%', padding: f.kind === 'pc' ? 8 : 0, boxSizing: 'border-box' }} />
              {f.kind === 'cv' && <span style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
                <span style={{ width: 20, height: 20, borderRadius: '50%', background: 'rgba(255,255,255,0.92)', display: 'grid', placeItems: 'center' }}>
                  <svg width="7" height="7" viewBox="0 0 12 12"><path d="M3.5 2.2v7.6L10 6z" fill={INK} /></svg></span></span>}
            </span>
            <span style={{ flex: 1, minWidth: 0 }}>
              <span style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: INK, marginBottom: 2 }}>{f.t}</span>
              <span style={{ display: 'block', fontSize: 10, lineHeight: 1.45, color: 'var(--text-secondary)' }}>{f.d}</span>
            </span>
            <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--brand-purple-700)', flexShrink: 0 }}>→</span>
          </a>
        </Reveal>)}
    </div>
  </MShell>;


Object.assign(window, { BrandFAQSection, MBrandFAQSection, CreatorSideSection, MCreatorSideSection });