/* faq-footer.jsx — Sections 12 & 13 */

const ffStyles = `
  .faq-grid {
    margin-top: 36px;
    display: grid; grid-template-columns: 1fr; gap: 0;
    border-top: 1px solid var(--line);
  }
  .faq-row {
    border-bottom: 1px solid var(--line);
    padding: 22px 0;
  }
  .faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; text-align: left;
    background: transparent; border: 0; padding: 0;
    cursor: pointer;
    font-family: var(--font-head);
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 400; line-height: 1.3;
    color: var(--ink);
  }
  .faq-q:hover { color: var(--terracotta-deep); }
  .faq-icon {
    width: 32px; height: 32px; border-radius: 50%;
    background: color-mix(in oklab, var(--cream-2) 70%, var(--cream));
    border: 1px solid var(--line);
    color: var(--ink-soft);
    display: grid; place-items: center;
    flex-shrink: 0;
    transition: transform .25s ease, background .25s ease, color .25s ease;
  }
  .faq-row.open .faq-icon {
    background: var(--terracotta); border-color: var(--terracotta); color: #fff;
    transform: rotate(45deg);
  }
  .faq-a {
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease, margin-top .25s ease, opacity .25s ease;
    color: var(--ink-soft); font-size: 16px; line-height: 1.6;
    max-width: 720px;
    opacity: 0;
  }
  .faq-row.open .faq-a { max-height: 400px; margin-top: 14px; opacity: 1; }

  /* Footer */
  .footer-inner {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px;
    align-items: flex-start;
  }
  @media (max-width: 880px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; } }
  @media (max-width: 600px) { .footer-inner { grid-template-columns: 1fr; } }
  .footer-blurb {
    color: var(--ink-soft);
    font-size: 14px; line-height: 1.55;
    max-width: 360px; margin-top: 14px;
  }
  .footer-col h5 {
    font-family: var(--font-body);
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
    color: var(--ink-soft); margin: 0 0 12px;
  }
  .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .footer-col a { color: var(--ink); text-decoration: none; font-size: 14px; }
  .footer-col a:hover { color: var(--terracotta-deep); }

  .footer-band {
    margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    color: var(--ink-soft); font-size: 12.5px;
  }
  .footer-band .endorse {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 10px;
    background: var(--ink); color: var(--cream);
    border-radius: 999px;
    font-size: 11.5px; letter-spacing: 0.04em;
  }
  .footer-band .endorse small { color: var(--terracotta-soft); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; font-weight: 500; }

  /* Sticky bottom CTA bar */
  .sticky-cta {
    position: fixed; left: 50%; bottom: 18px;
    transform: translateX(-50%) translateY(40px);
    transition: transform .35s ease, opacity .35s ease;
    opacity: 0; pointer-events: none;
    z-index: 40;
    display: inline-flex; align-items: center; gap: 12px;
    width: max-content; max-width: calc(100vw - 24px);
    white-space: nowrap;
    padding: 8px 8px 8px 18px;
    background: color-mix(in oklab, var(--ink) 92%, transparent);
    color: var(--cream);
    border-radius: 999px;
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px -16px rgba(0,0,0,0.4);
    font-size: 14px;
  }
  .sticky-cta.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
  .sticky-cta .btn { padding: 9px 14px; font-size: 13.5px; }
`;

const FAQ_ITEMS = (productName) => [
  {
    q: `Do I need to buy a camera to use ${productName}?`,
    a: `Not necessarily. ${productName} runs on a spare smartphone, so you can start with an old phone you already have. Check that your model is supported in the app. If you'd rather have a dedicated device, the ${productName} Cam is optional.`,
  },
  {
    q: `Does ${productName} work with my existing security camera?`,
    a: `Not for now. ${productName} runs its own software on a spare phone or the ${productName} Cam, rather than plugging into other camera brands. That's how we keep your footage on our own private compute layer. Direct integrations may come later.`,
  },
  {
    q: 'How accurate are the alerts?',
    a: `Very accurate, and it improves over time. ${productName} builds on monitoring technology proven in demanding commercial settings, and it keeps learning the specific rhythms of your home.`,
  },
  {
    q: 'Where is my video stored?',
    a: 'In our private compute layer (not Amazon, not Google). Clips are deleted after 72 hours unless you save them. We never use your footage to train models for others.',
  },
  {
    q: 'When can I get it?',
    a: `Early access begins Q3 2026. Beta members get priority and a 50% discount on ${productName}+ for the first year.`,
  },
];

function FAQSection({ productName }) {
  const [open, setOpen] = React.useState(0);
  const items = FAQ_ITEMS(productName);
  return (
    <section id="faq" className="band-paper" data-screen-label="12 FAQ">
      <div className="wrap">
        <SectionHead
          eyebrow="Questions you'll ask anyway"
          title="Frequently asked."
        />
        <div className="faq-grid">
          {items.map((it, i) => (
            <Reveal key={i} className={`faq-row ${open === i ? 'open' : ''}`} delay={i * 30}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{it.q}</span>
                <span className="faq-icon" aria-hidden>
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
                </span>
              </button>
              <div className="faq-a">{it.a}</div>
            </Reveal>
          ))}
        </div>
      </div>
      <style dangerouslySetInnerHTML={{ __html: ffStyles }} />
    </section>
  );
}

function FooterSection({ productName }) {
  return (
    <footer data-screen-label="13 Footer">
      <div className="wrap footer-inner">
        <div>
          <Logo name={productName} small />
          <p className="footer-blurb">
            <b style={{ color: 'var(--ink)' }}>One camera that understands what matters.</b><br />
            Built by a team from public-safety AI.<br />
            Now coming home.
          </p>
        </div>
        <div className="footer-col">
          <h5>Product</h5>
          <ul>
            <li><a href="#difference">How it works</a></li>
            <li><a href="#use-cases">Use cases</a></li>
            <li><a href="#pricing">Pricing</a></li>
            <li><a href="#privacy">Privacy</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Company</h5>
          <ul>
            <li><a href="#trust">Why we built it</a></li>
            <li><a href="mailto:press@care.house">Press</a></li>
            <li><a href="mailto:careers@care.house">Careers</a></li>
            <li><a href="mailto:hello@care.house">Contact</a></li>
          </ul>
        </div>
      </div>
      <div className="wrap footer-band">
        <span>© {new Date().getFullYear()} {productName}. In private exploration. Pricing, features, and timeline subject to change.</span>
        <a href="privacy.html" style={{ color: 'var(--ink-soft)' }}>Privacy policy</a>
      </div>
    </footer>
  );
}

function StickyCTA({ productName }) {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      const survey = document.getElementById('survey');
      const surveyTop = survey ? survey.getBoundingClientRect().top + y : 0;
      const surveyBottom = survey ? surveyTop + survey.offsetHeight : 0;
      setShow(y > window.innerHeight * 0.8 && (y + window.innerHeight) < surveyBottom - 200);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={`sticky-cta ${show ? 'show' : ''}`}>
      <span>Spots left for early access</span>
      <a href="#survey" className="btn accent">Request beta access</a>
    </div>
  );
}

Object.assign(window, { FAQSection, FooterSection, StickyCTA });