/* Sections: Hero, Nav, Modules, Statement, Stats, Integrations, Security, Testimonial, CTA, Footer */

const Nav = () => (
  <header className="nav">
    <div className="container nav-row">
      <div className="brand">
        <StackMark size={26} />
        BrokerStudio
      </div>
      <nav className="nav-links">
        <a href="#platform">Platform</a>
        <a href="#modules">Modules</a>
        <a href="#integrations">Integrations</a>
        <a href="#security">Security</a>
        <a href="#company">Company</a>
      </nav>
      <div className="nav-cta">
        <Button variant="ghost">Sign in</Button>
        <Button variant="primary" icon="arrow" data-cal-link="mahmoud-ebied-829nee" data-cal-namespace="demo" data-cal-config='{"layout":"month_view"}'>Book a demo</Button>
      </div>
    </div>
  </header>
);

const Hero = ({ headline }) => {
  return (
  <section className="hero" id="platform">
    <div className="container">
      <div style={{display:'flex', alignItems:'center', gap:18, marginBottom:40, paddingBottom:24, borderBottom:'1px solid var(--line)'}}>
        <StackMark size={56} />
        <div style={{display:'flex', flexDirection:'column', gap:4}}>
          <span style={{fontSize:30, fontWeight:600, letterSpacing:'-0.025em', lineHeight:1}}>BrokerStudio</span>
          <span className="mono caps" style={{color:'var(--muted)', fontSize:11, letterSpacing:'0.14em'}}>The Broker's AI Workspace</span>
        </div>
      </div>

      <h1>
        Sharper Insights.<br/>
        Faster Turnaround.<br/>
        <em>Happier Clients.</em>
      </h1>

      <div className="hero-sub">
        <p className="hero-lead">
          One workspace for the modern broker. We unify the fragmented tools, files and inboxes your team works across — so every renewal, quote and certificate moves on a single thread.
        </p>
      </div>

      <div className="hero-ctas">
        <Button variant="primary" icon="arrow" data-cal-link="mahmoud-ebied-829nee" data-cal-namespace="demo" data-cal-config='{"layout":"month_view"}'>Book a demo</Button>
      </div>

      <div className="hero-visual">
        <HeroIntroAnimation />
      </div>
    </div>
  </section>
  );
};

const Marquee = () => {
  const items = [
    "COI issuance", "Quote comparisons", "Policy checks", "Contract review",
    "Outlook integration", "Renewal tracking", "Submission triage", "YoY policy diffs",
    "Endorsement reconciliation", "Coverage gap detection", "Client-ready proposals",
    "Inbox filing & routing", "Task tracking", "Built by brokers—for brokers"
  ];
  const strip = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marq-track">
        {strip.map((t, i) => (
          <React.Fragment key={i}><span className="dot">●</span><span>{t}</span></React.Fragment>
        ))}
      </div>
    </div>
  );
};

const Stats = () => (
  <div className="container" style={{paddingTop:0, paddingBottom:0}}>
    <div className="stats">
      <div className="stat"><div className="k">71%</div><div className="l">less time on COI admin</div></div>
      <div className="stat"><div className="k">4.3×</div><div className="l">more quotes compared per submission</div></div>
      <div className="stat"><div className="k">&lt; 90s</div><div className="l">average policy check</div></div>
      <div className="stat"><div className="k">A+</div><div className="l">E&amp;O audit posture</div></div>
    </div>
  </div>
);

/* ---------- Modules tab explorer ---------- */
const MODULES = [
  { k: "coi",      name: "COI System",            desc: "Issue, track and auto-renew certificates. ACORD-compliant, contract-aware, and bulk-ready.", Mock: () => <MockCOI/>,       key: "MOD/01", outlook: false, url: "app.brokerstudio.com/coi/meridian-logistics" },
  { k: "quotes",   name: "Quote Comparisons",     desc: "Compare quotes in minutes, not hours. Carriers normalized side-by-side, with coverage deltas surfaced automatically.", Mock: () => <MockQuotes/>, key: "MOD/02", outlook: false, url: "app.brokerstudio.com/quotes/hartwell-mfg" },
  { k: "policy",   name: "Policy Checks",         desc: "Binder-vs-quote verification and year-over-year change tracking. Every endorsement, schedule and limit reconciled.", Mock: () => <MockPolicy/>, key: "MOD/03", outlook: false, url: "app.brokerstudio.com/policy/atlas-food" },
  { k: "contract", name: "Contract Review",       desc: "Extract insurance obligations from leases, MSAs and vendor contracts, then reconcile against in-force policies.", Mock: () => <MockContract/>, key: "MOD/04", outlook: false, url: "app.brokerstudio.com/contracts/meridian-lease" },
  { k: "outlook",  name: "Email Integration",     desc: "BrokerStudio inside Outlook. Filing, task tracking and routing happen without leaving your inbox.", Mock: () => <MockOutlook/>, key: "MOD/05", outlook: true,  url: "outlook.office.com" },
];

const Modules = () => {
  const [active, setActive] = React.useState("coi");
  const mod = MODULES.find(m => m.k === active);
  return (
    <section id="modules">
      <div className="container">
        <Label n="SEC/02">Modules</Label>
        <h2 className="sec-title">Broker-grade tools. One workspace.</h2>
        <p className="sec-lead">Every tool is built around the real motions of a commercial broker's day, not a generic CRM shaped to look like one. A selection of what's inside:</p>

        <div className="modules" style={{marginTop:56}}>
          <div className="mod-tabs" role="tablist">
            {MODULES.map((m, i) => (
              <button
                key={m.k}
                role="tab"
                aria-selected={m.k === active}
                className="mod-tab"
                onClick={() => setActive(m.k)}
              >
                <div className="num">{String(i+1).padStart(2,'0')}</div>
                <div className="body">
                  <div className="name">{m.name}</div>
                  <div className="desc">{m.desc}</div>
                </div>
                <Icon name="caret" size={16} className="caret" />
              </button>
            ))}
          </div>
          <div className="mod-stage">
            <mod.Mock />
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- Built by brokers statement ---------- */
const Statement = () => (
  <section className="statement" id="company" style={{borderTop:'none'}}>
    <div className="container">
      <div>
        <Label n="SEC/03" color="var(--accent)"><span style={{color:'color-mix(in oklab, var(--bg) 70%, transparent)'}}>Our wager</span></Label>
        <h2>Built by brokers,<br/><em>for brokers.</em></h2>
        <div className="signoff">
          <span className="dash"/>
          <span>Founded by ex-commercial brokers who have seen the industry from the inside</span>
        </div>
      </div>
      <div>
        <p style={{marginTop:0}}>
          We've been brokers. We've felt the pain of fragmented tools, late nights and last-minute COIs. BrokerStudio is what we wished we'd had.
        </p>
        <p>
          Time savings start on day one — it slots into the systems you already use, with no rip-and-replace and no consultants. Your client data stays secure, your workflow stays yours, and your team gets its evenings back.
        </p>
        <div className="row" style={{gap:12, marginTop:24}}>
          <Button variant="accent" icon="arrow">Meet the team</Button>
          <Button style={{borderColor:'color-mix(in oklab, var(--bg) 30%, transparent)', color:'var(--bg)'}}>Read our manifesto</Button>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- Testimonial ---------- */
const Testimonial = () => (
  <section>
    <div className="container">
      <Label n="SEC/04">From the field</Label>
      <div className="testi">
        <blockquote>
          "BrokerStudio gave my team back their <span>Fridays.</span> Quote comparisons that used to eat a whole afternoon now take a coffee, and nothing falls through the cracks at renewal — the policy check catches it first."
        </blockquote>
        <div>
          <div className="attrib">
            <div className="avatar"/>
            <div className="meta">
              <b>Alan Purdew</b>
              <span>Managing Partner · Mid-market commercial brokerage</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- Integrations ---------- */
const INTEGRATIONS = [
  { name: "Microsoft Outlook", note: "Live" },
  { name: "Gmail", note: "Beta" },
  { name: "SharePoint", note: "Live" },
  { name: "More to come", note: "On the roadmap" },
];

const Integrations = () => (
  <section id="integrations">
    <div className="container">
      <Label n="SEC/05">Integrations</Label>
      <h2 className="sec-title">Lives where you work.</h2>
      <p className="sec-lead">BrokerStudio connects to the systems of record commercial brokers already rely on. No rip-and-replace, no data marooned in another tab.</p>
      <div className="int-grid" style={{marginTop:56, gridTemplateColumns:'repeat(4, 1fr)'}}>
        {INTEGRATIONS.map(x => (
          <div className="int-cell" key={x.name} style={{aspectRatio:'2 / 1', flexDirection:'column', gap:10, display:'flex', justifyContent:'center', alignItems:'center'}}>
            <div style={{fontSize:17, color:'var(--ink)', fontFamily:'var(--ff-sans)', fontWeight:500, letterSpacing:'-0.01em'}}>{x.name}</div>
            <div style={{fontSize:10.5, letterSpacing:'0.12em', textTransform:'uppercase', color: x.note==='Beta' ? 'var(--accent)' : 'var(--muted)'}}>{x.note}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- Security ---------- */
const Security = () => (
  <section id="security">
    <div className="container">
      <Label n="SEC/06">Data security &amp; trust</Label>
      <h2 className="sec-title">Your client data, defended end-to-end.</h2>
      <p className="sec-lead">No black boxes. No data leaks. No extra steps in your workflow. Just a workspace that respects how your file gets defended at renewal.</p>
      <div className="sec-grid" style={{marginTop:48, gridTemplateColumns:'repeat(2, 1fr)'}}>
        <div className="sec-card">
          <div className="badge mono">01</div>
          <div>
            <h4>Human-in-the-loop</h4>
            <p>Every AI output is a draft. Nothing leaves your desk to a carrier, holder or client without a broker on the pen.</p>
          </div>
        </div>
        <div className="sec-card">
          <div className="badge mono">02</div>
          <div>
            <h4>Your data stays yours</h4>
            <p>Client files stay in your workspace. Never used to train external AI models. Ever.</p>
          </div>
        </div>
        <div className="sec-card">
          <div className="badge mono">03</div>
          <div>
            <h4>Privacy law, built-in</h4>
            <p>Designed with PIPEDA and US state privacy laws in mind, so handling client data doesn't become your problem.</p>
          </div>
        </div>
        <div className="sec-card">
          <div className="badge mono">04</div>
          <div>
            <h4>Full audit trail</h4>
            <p>Every action, diff and send is time-stamped and exportable. The paper trail you'll want when a file is questioned.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- CTA ---------- */
const CTA = () => (
  <section className="cta" style={{borderTop:'1px solid var(--line)'}}>
    <div className="container wrap">
      <div>
        <Label n="SEC/07">Get started</Label>
        <h2>See a renewal run through BrokerStudio in 20 minutes.</h2>
      </div>
      <div style={{display:'flex', gap:12, flexDirection:'column', alignItems:'flex-start'}}>
        <Button variant="primary" icon="arrow" data-cal-link="mahmoud-ebied-829nee" data-cal-namespace="demo" data-cal-config='{"layout":"month_view"}'>Book a demo</Button>
        <span className="mono caps" style={{color:'var(--muted)'}}>Typical response · under 2 hours</span>
      </div>
    </div>
  </section>
);

/* ---------- Footer ---------- */
const Footer = () => (
  <footer>
    <div className="container">
      <div className="f-grid">
        <div>
          <div className="brand" style={{marginBottom:14}}>
            <StackMark size={26} /> BrokerStudio
          </div>
          <div style={{maxWidth:'34ch'}}>The AI partner to commercial insurance brokers. Built by brokers, for brokers.</div>
        </div>
        <div>
          <h5>Platform</h5>
          <a>COI System</a>
          <a>Quote Comparisons</a>
          <a>Policy Checks</a>
          <a>Contract Review</a>
          <a>Outlook Add-in</a>
        </div>
        <div>
          <h5>Company</h5>
          <a>About</a>
          <a>Manifesto</a>
          <a>Careers</a>
          <a>Press kit</a>
          <a>Contact</a>
        </div>
        <div>
          <h5>Resources</h5>
          <a>Docs</a>
          <a>Security</a>
          <a>Changelog</a>
          <a>Status</a>
          <a>E&amp;O brief</a>
        </div>
      </div>
      <div className="legal">
        <span>© 2026 BrokerStudio, Inc. · Boston, MA</span>
        <span>v26.04 · Built by brokers, for brokers</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Nav, Hero, Marquee, Stats, Modules, Statement, Testimonial, Integrations, Security, CTA, Footer });