// Supporting sections: logo bar, feature grid, stats, footer
const { useState: useStateS } = React;

function LogoBar() {
  const logos = [
    'MAPLE REALTY', 'ROCKWELL', 'NORTHSHORE', 'GRANITE GROUP', 'CEDAR & CO', 'HARBOURFRONT', 'SUMMIT'
  ];
  return (
    <section className="logo-bar">
      <div className="logo-bar-label">Trusted by brokerages across Canada</div>
      <div className="logo-bar-track">
        {logos.map((l, i) => (
          <div key={i} className="logo-pill">{l}</div>
        ))}
      </div>
    </section>
  );
}

const FEATURES = [
  {
    title: 'Transaction management',
    desc: 'Forms, e-signatures, document storage, and automated reminders — all in one workflow. Agents never leave the platform.',
    bullets: ['Provincial form libraries', 'Unlimited e-signatures', 'Audit-ready document trail'],
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
        <polyline points="14 2 14 8 20 8"/>
        <line x1="9" y1="13" x2="15" y2="13"/>
        <line x1="9" y1="17" x2="13" y2="17"/>
      </svg>
    )
  },
  {
    title: 'Compliance & audit',
    desc: 'Built to RECO, OACIQ, and provincial standards. Flag missing docs before they become a liability.',
    bullets: ['Real-time compliance checks', 'Broker-of-record review queue', 'Automatic retention policy'],
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
        <polyline points="9 12 11 14 15 10"/>
      </svg>
    )
  },
  {
    title: 'Back-office & accounting',
    desc: 'Commission splits, trust accounting, and deal payouts without exporting to a second system.',
    bullets: ['Split plans & caps', 'Trust reconciliation', 'T4A export-ready'],
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
        <rect x="2" y="5" width="20" height="14" rx="2"/>
        <line x1="2" y1="10" x2="22" y2="10"/>
        <line x1="6" y1="15" x2="10" y2="15"/>
      </svg>
    )
  },
  {
    title: 'CRM lite',
    desc: 'Lead capture, contact records, and follow-up reminders for agents — the 20% of a CRM that drives 80% of deals.',
    bullets: ['Lead routing rules', 'Pipeline stages', 'Email + SMS reminders'],
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
        <circle cx="9" cy="7" r="4"/>
        <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
        <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
      </svg>
    )
  },
  {
    title: 'Reporting & analytics',
    desc: 'Deal velocity, agent performance, compliance gaps, GCI forecasts — all in dashboards you can actually read.',
    bullets: ['Broker dashboards', 'Export to CSV / PDF', 'Scheduled email digests'],
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
        <line x1="18" y1="20" x2="18" y2="10"/>
        <line x1="12" y1="20" x2="12" y2="4"/>
        <line x1="6" y1="20" x2="6" y2="14"/>
      </svg>
    )
  },
  {
    title: 'Canadian data residency',
    desc: 'Your data lives in Canadian data centres, under Canadian privacy law. Board integrations included.',
    bullets: ['Stored in Canada', 'PIPEDA compliant', 'Local board integrations'],
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
        <circle cx="12" cy="12" r="10"/>
        <line x1="2" y1="12" x2="22" y2="12"/>
        <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
      </svg>
    )
  },
];

function FeatureGrid() {
  return (
    <section className="features">
      <div className="section-header">
        <div className="eyebrow">One platform, six core modules</div>
        <h2>Everything a Canadian brokerage runs on — without the tab-switching tax.</h2>
        <p>Replace four to six tools with a single back-office. Your agents work faster, your broker-of-record sleeps better, and your data stays in Canada.</p>
      </div>
      <div className="feature-grid">
        {FEATURES.map((f, i) => (
          <div key={i} className="feature-card">
            <div className="feature-icon">{f.icon}</div>
            <div className="feature-title">{f.title}</div>
            <div className="feature-desc">{f.desc}</div>
            <ul className="feature-bullets">
              {f.bullets.map((b, j) => (
                <li key={j}>
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
                  {b}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

function FooterCTA() {
  return (
    <section className="footer-cta">
      <div className="footer-cta-inner">
        <div className="footer-cta-copy">
          <div className="eyebrow">Still scrolling?</div>
          <h2>The calendar's at the top of the page.</h2>
          <p>A 45-minute walkthrough is the fastest way to know if NexOne fits your brokerage — or if it doesn't.</p>
        </div>
        <a href="#book" className="footer-cta-btn" onClick={(e) => {
          e.preventDefault();
          document.getElementById('book').scrollIntoView({ behavior: 'smooth', block: 'start' });
        }}>
          Book a demo
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
        </a>
      </div>
      <div className="footer-bottom">
        <div className="footer-brand">
          <img src="nexone-logo.svg" alt="NexOne" className="footer-logo" />
          <span>NexOne Corporation · Canada's trusted brokerage platform</span>
        </div>
        <div className="footer-links">
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
          <a href="#">Security</a>
          <a href="#">Contact</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LogoBar, FeatureGrid, FooterCTA });