// FAQ, final CTA, footer.

const FAQ_DATA = [
  {
    q: 'Do you take my shares as collateral?',
    a: 'No. Never a lien, never a pledge. Your equity is underwriting input, not security. Your home secures the mortgage, the way it does with any mortgage.',
  },
  {
    q: 'Do I have to sell any stock?',
    a: 'No. Not selling is the entire point.',
  },
  {
    q: 'Is this an SPV or a share-backed loan?',
    a: 'No. Those are the structures companies and regulators have been shutting down. This is a regular mortgage with underwriting that can finally see your equity.',
  },
  {
    q: 'My company is not on your list. Does that matter?',
    a: 'Tell us anyway. We assess most venture-backed late-stage companies.',
  },
  {
    q: 'What does it cost me?',
    a: 'Standard mortgage rates and closing costs. No premium for being underwritten properly.',
  },
  {
    q: 'When can I actually use this?',
    a: 'We are onboarding our first cohort now. Check eligibility to claim a spot.',
  },
];

const FAQ = () => {
  const [open, setOpen] = useState(0);
  return (
    <section className="section fog" id="faq">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">04 / Questions</div>
          <h2 className="h2">The questions you are actually asking.</h2>
        </div>
        <div className="faq">
          {FAQ_DATA.map((item, i) => (
            <div key={i} className="faq-item" data-open={open === i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{item.q}</span>
                <span className="glyph">+</span>
              </button>
              <div className="faq-a">{item.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FinalCTA = () => (
  <section className="section tight">
    <div className="container">
      <div className="final">
        <div className="eyebrow" style={{color:'rgba(255,255,255,0.7)'}}>Cohort 01 · San Francisco</div>
        <h2 className="h2">Get the home you&rsquo;ve earned.</h2>
        <p>
          We&rsquo;re onboarding a small group of buyers in San Francisco
          first. If your equity is real and your lender cannot see it, get
          in line.
        </p>
        <a href="#elig" className="btn btn-dark btn-lg">
          Check your eligibility
          <Icon.Arrow size={16}/>
        </a>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <div className="container">
      <hr className="footer-rule footer-rule-top" />
      <div className="footer-row">
        <div className="footer-l">
          <a className="brand" href="#">
            <img src="favicon.svg" className="brand-mark" alt="Vested" />
            <span>Vested</span>
          </a>
          <div className="footer-tag">The mortgage that counts your equity.</div>
        </div>
        <div className="footer-links">
          <a href="#how">How it works</a>
          <a href="#elig">Check eligibility</a>
          <a href="#faq">FAQ</a>
          <a href="#">Privacy</a>
          <a href="mailto:dan@vestedmortgages.com">dan@vestedmortgages.com</a>
        </div>
      </div>
      <hr className="footer-rule" />
      <div className="footer-disclaim">
        Vested is not a commitment to lend. Equity-counted underwriting is
        subject to lender approval and applicable law. Figures shown are
        illustrative and are not a quote or an offer. Vested does not
        provide financial, tax, or legal advice. Company names and logos
        shown on this site are used for illustrative purposes only and do
        not imply endorsement, partnership, or affiliation.
        &copy; 2026 Vested, Inc.
        {' '}Logos by <a href="https://logo.dev" target="_blank" rel="noopener">Logo.dev</a>.
      </div>
    </div>
  </footer>
);

window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;