/* Big section components: Hero, Feature deep-dives, Marquee, FAQ, Footer. */

// ── Sticky nav ──
const Nav = () => (
  <nav className="nav">
    <a href="#top" className="brand">
      <span className="icon">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <path d="M2 7l3 3 7-7" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </span>
      Set Assist
    </a>
    <div className="nav-links">
      <a href="#features">Features</a>
      <a href="#pricing">Pricing</a>
      <a href="#compare">Compare</a>
    </div>
    <a href="#pricing" className="btn btn-primary nav-cta" style={{padding:'8px 16px', fontSize:14}}>
      Get Set Assist
    </a>
    <style>{`
      @media (max-width: 480px) {
        .nav-cta { padding: 7px 12px !important; font-size: 12px !important; }
      }
    `}</style>
  </nav>
);

// ── Hero ──
// Headline: render the SECOND line as a Fraunces italic with a champagne gradient
// for a luxurious editorial accent. Mobile: stack fragments vertically.
const Hero = ({headline}) => {
  const [line1, line2] = headline.split('\n');
  return (
    <section className="section ambient" id="top" style={{paddingTop: 140, paddingBottom: 60, overflow:'hidden'}}>
      <div className="container" style={{textAlign:'center'}}>
        <div className="reveal in" style={{display:'inline-block'}}>
          <div className="eyebrow" style={{marginBottom: 28}}>
            <span className="dot"/> For Canadian film & TV freelancers
          </div>
        </div>

        <h1 className="display reveal in hero-h1" style={{
          fontSize: 'clamp(40px, 7vw, 96px)',
          margin: '0 auto 22px',
          maxWidth: 1080,
        }}>
          <span style={{display:'block'}}>{line1}</span>
          {line2 && (
            <span style={{
              display:'block',
              background:'linear-gradient(90deg, #7b7af4, #a8a6ff, #ff7fb6)',
              WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent',
              backgroundClip:'text'
            }}>{line2}</span>
          )}
        </h1>

        <div className="rule" style={{margin:'0 auto 22px'}}/>

        <p className="reveal in" style={{
          fontSize: 'clamp(17px, 1.5vw, 21px)',
          color: 'var(--sa-text3)',
          maxWidth: 640, margin: '0 auto 36px',
          lineHeight: 1.5,
          letterSpacing: '-0.012em',
        }}>
          ACCP rates. Overtime, meal penalties, kit fees. Invoices that get paid.
          Payroll wraps without the spreadsheet. <strong style={{color:'var(--sa-text)', fontWeight:600}}>One app, on set, in your pocket.</strong>
        </p>

        <div className="hero-ctas" style={{display:'flex', justifyContent:'center', gap:12, flexWrap:'wrap', marginBottom:16}}>
          <a href="https://apps.apple.com/ca/app/set-assist/id6762023708" target="_blank" rel="noopener" className="store-badge">
            <Apple size={26}/>
            <div style={{textAlign:'left'}}>
              <div className="sb-small">Download on the</div>
              <div className="sb-big">App Store</div>
            </div>
          </a>
          <GooglePlayBadge/>
        </div>

        <div style={{fontSize:12, color:'var(--sa-text4)', letterSpacing:'0.04em'}}>Free to start · No credit card · Cancel anytime</div>

        {/* Floating fragments montage — desktop overlapping, mobile stack */}
        <div className="hero-collage">
          <div className="hero-frag hero-frag-center"><FragCalcResult/></div>
          <div className="hero-frag hero-frag-tl"><FragInvoiceList/></div>
          <div className="hero-frag hero-frag-tr"><FragCalendarStrip/></div>
          <div className="hero-frag hero-frag-bl"><FragNotif/></div>
          <div className="hero-frag hero-frag-br"><FragCrewCard/></div>
        </div>
      </div>

      <style>{`
        .hero-collage {
          margin-top: 80px;
          position: relative;
          height: 540px;
          max-width: 1100px;
          margin-left: auto; margin-right: auto;
        }
        .hero-frag { position: absolute; }
        .hero-frag-center { left: 50%; top: 0; transform: translateX(-50%); z-index: 3; }
        .hero-frag-tl     { left: 0;   top: 80px; transform: rotate(-3deg); z-index: 2; }
        .hero-frag-tr     { right: 0;  top: 60px; transform: rotate(3deg);  z-index: 2; }
        .hero-frag-bl     { left: 10%; bottom: 30px; transform: rotate(-2deg); z-index: 4; }
        .hero-frag-br     { right: 12%; bottom: 0; transform: rotate(2deg);  z-index: 4; }

        @media (max-width: 900px) {
          .hero-collage {
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 22px;
            margin-top: 56px;
            padding: 0 6px;
          }
          .hero-frag { position: static; }
          .hero-frag-center { transform: none; }
          .hero-frag-tl     { transform: rotate(-1.5deg); }
          .hero-frag-tr     { transform: rotate(1.5deg);  }
          .hero-frag-bl     { transform: rotate(-1deg);   }
          .hero-frag-br     { transform: rotate(1deg);    }
          .hero-frag .glass { width: min(360px, calc(100vw - 48px)) !important; }
        }
        @media (max-width: 560px) {
          .hero-ctas .store-badge { flex: 1 1 auto; min-width: 150px; justify-content: center; }
        }
      `}</style>
    </section>
  );
};

// ── Roles marquee ──
const RolesMarquee = () => {
  const roles = [
    {n:'1st AC', c:'#7b7af4'},{n:'Camera Op', c:'#5e5ce6'},
    {n:'Gaffer', c:'#ff9f0a'},{n:'Best Boy', c:'#ffb547'},
    {n:'Sound Mixer', c:'#30d158'},{n:'Boom Op', c:'#5cd97f'},
    {n:'Key Grip', c:'#bf5af2'},{n:'Dolly Grip', c:'#d68bf5'},
    {n:'Script Sup.', c:'#40c8e0'},{n:'2nd AD', c:'#7b7af4'},
    {n:'Wardrobe', c:'#ff375f'},{n:'Makeup', c:'#ff6b8a'},
    {n:'Production Designer', c:'#a8a6ff'},{n:'Set Dec', c:'#ff9f0a'},
    {n:'VTR', c:'#40c8e0'},{n:'DIT', c:'#5e5ce6'},
  ];
  const all = [...roles, ...roles];
  return (
    <section style={{padding:'40px 0 80px', position:'relative'}}>
      <div className="container" style={{textAlign:'center', marginBottom:24}}>
        <div className="section-eyebrow">Every department</div>
        <p style={{fontSize:18, color:'var(--sa-text3)', maxWidth:600, margin:'0 auto'}}>
          ACCP-accurate rates and OT scales for every position on the call sheet.
        </p>
      </div>
      <div className="marquee">
        <div className="marquee-track">
          {all.map((r,i)=>(
            <span key={i} className="marquee-chip">
              <span className="role-dot" style={{background:r.c}}/>
              {r.n}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── Big feature block ──
const FeatureBlock = ({eyebrow, title, body, accent='var(--sa-accent-hi)', children, reverse}) => (
  <section className="section feature-block" style={{padding:'80px 24px'}}>
    <div className="feature-grid" style={{
      maxWidth: 1200, margin:'0 auto',
      display:'grid',
      gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
      gap: 80,
      alignItems:'center',
      position:'relative', zIndex: 2,
    }}>
      <div className="reveal feature-copy" style={{order: reverse ? 2 : 1}}>
        <div className="section-eyebrow" style={{color: accent}}>{eyebrow}</div>
        <h2 className="display" style={{
          fontSize:'clamp(32px, 4.4vw, 56px)',
          margin:'0 0 20px',
          letterSpacing:'-0.03em'
        }}>{title}</h2>
        <p style={{fontSize:17, lineHeight:1.6, color:'var(--sa-text3)', letterSpacing:'-0.01em'}}>{body}</p>
      </div>
      <div className="reveal feature-art" style={{order: reverse ? 1 : 2, position:'relative', minHeight: 480, display:'flex', alignItems:'center', justifyContent:'center'}}>
        {children}
      </div>
    </div>
    <style>{`
      @media (max-width: 900px) {
        .feature-block { padding: 56px 18px !important; }
        .feature-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        .feature-copy { order: 1 !important; }
        .feature-art  { order: 2 !important; min-height: auto !important; }
        .feature-art > .glass { width: min(360px, calc(100vw - 48px)) !important; }
      }
      @media (max-width: 560px) {
        .feature-block { padding: 48px 16px !important; }
      }
    `}</style>
  </section>
);

// ── FAQ ──
const FAQ = () => {
  const items = [
    {q:'What is ACCP and why does it matter?', a:'ACCP is the Alliance of Canadian Cinema, Television and Radio Artists / Canadian Council of Producers — the governing body that publishes recommended rates and overtime scales for Canadian film & TV freelancers. Set Assist ships with the latest July 2025 → June 2026 ACCP rate card built in. No spreadsheets, no PDFs, no math at 2am.'},
    {q:'Is my data backed up?', a:'Yes. Sign in with email or Apple and your invoices, calendar, kit, finances, and crew profile sync across every device. If your phone goes for a swim in the harbour, your data does not.'},
    {q:'Does it work offline at base camp?', a:'Yes. The app is offline-first — log a meal penalty in a parking garage, your changes sync the moment you have signal again.'},
    {q:'I am not in Canada. Can I still use it?', a:'You can use the calculator with custom rates, plus all of the invoicing, kit inventory, finances, and crew tools. ACCP-specific OT scales assume Canadian production rules — let us know if your region needs first-class support.'},
    {q:'Can a Production Manager use Set Assist to book crew?', a:'Yes — Pro tier unlocks PM tools, including Claim a Job, My Jobs, and the ability to discover and book crew from the directory.'},
    {q:'How do I cancel?', a:'Manage in Settings → Apple ID → Subscriptions on iOS, or Google Play subscriptions on Android. Cancel any time before the end of the period.'},
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq" style={{paddingTop: 80, paddingBottom: 100}}>
      <div className="container-narrow">
        <div className="section-eyebrow">Questions</div>
        <h2 className="display" style={{fontSize:'clamp(32px, 5vw, 64px)', margin:'0 0 40px', letterSpacing:'-0.03em'}}>
          The fine print, <span className="serif grad-pearl" style={{fontWeight:500}}>in plain English</span>.
        </h2>
        {items.map((it, i)=>(
          <div key={i} className="faq-item">
            <div className="faq-q" onClick={()=>setOpen(open===i ? -1 : i)}>
              <span>{it.q}</span>
              <span style={{transform: open===i ? 'rotate(180deg)':'none', transition:'transform 200ms ease', color:'var(--sa-accent-hi)'}}>
                <ChevDown/>
              </span>
            </div>
            {open===i && <div className="faq-a">{it.a}</div>}
          </div>
        ))}
      </div>
    </section>
  );
};

// ── Footer ──
const Footer = () => (
  <footer>
    <div className="container">
      <div className="footer-grid" style={{
        display:'grid',
        gridTemplateColumns:'2fr 1fr 1fr',
        gap:40, marginBottom:48
      }}>
        <div>
          <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:14}}>
            <span style={{
              width:32, height:32, borderRadius:8,
              background:'linear-gradient(135deg, #7b7af4, #5e5ce6)',
              display:'grid', placeItems:'center'
            }}>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M2 7l3 3 7-7" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </span>
            <span style={{fontSize:18, fontWeight:600, letterSpacing:'-0.01em'}}>Set Assist</span>
          </div>
          <p style={{fontSize:14, color:'var(--sa-text3)', lineHeight:1.6, maxWidth:340}}>
            Calculations, invoices, crew, and payroll for film & TV freelancers.
            Built in Canada. Made on set.
          </p>
          <a
            href="mailto:kristian.jc.wood@gmail.com"
            style={{
              display:'inline-block',
              marginTop:14,
              fontSize:14,
              color:'var(--sa-text2)'
            }}
          >
            kristian.jc.wood@gmail.com
          </a>
          <div style={{display:'flex', gap:10, marginTop:20}}>
            <a href="https://apps.apple.com/ca/app/set-assist/id6762023708" target="_blank" rel="noopener" className="store-badge" style={{padding:'8px 14px 8px 10px'}}>
              <Apple size={20}/>
              <div style={{textAlign:'left'}}>
                <div className="sb-small">Download on</div>
                <div className="sb-big" style={{fontSize:14}}>App Store</div>
              </div>
            </a>
            <GooglePlayBadge compact/>
          </div>
        </div>
        <div>
          <div className="col-title">Product</div>
          <a href="#features">Features</a>
          <a href="#pricing">Pricing</a>
        </div>
        <div>
          <div className="col-title">Legal</div>
          <a href="/terms.html">Terms of Use</a>
          <a href="/privacy.html">Privacy Policy</a>
        </div>
      </div>
      <div style={{
        paddingTop: 32, borderTop: '0.5px solid rgba(255,255,255,0.08)',
        display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:14,
        fontSize: 12, color:'var(--sa-text4)'
      }}>
        <div>© 2026 Greyed Out LTD. All rights reserved.</div>
        <div>Apple and the Apple Logo are trademarks of Apple Inc.  Google Play and the Google Play logo are trademarks of Google LLC.</div>
      </div>
    </div>
    <style>{`
      @media (max-width: 900px) {
        .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
        .footer-grid > div:first-child { grid-column: 1 / -1; }
      }
      @media (max-width: 480px) {
        footer { padding: 60px 18px 40px !important; }
        .footer-grid { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </footer>
);

Object.assign(window, { Nav, Hero, RolesMarquee, FeatureBlock, FAQ, Footer });