/* global React, Icon, Reveal, Counter */
const { useState, useEffect, useRef } = React;

/* ============================================
   Hero — terminal alert visual
   ============================================ */
const Hero = ({ navigate, headlineVariant = "outcome" }) => {
  const headlines = {
    outcome: { lead: "Stop credential attacks", emph: "before they start." },
    insider: { lead: "Red-team intelligence,", emph: "working for you." },
    threat: { lead: "Your credentials are leaking.", emph: "Find out before attackers do." },
    keep: { lead: "Protect your business with", emph: "proactive breach monitoring." }
  };
  const h = headlines[headlineVariant] || headlines.outcome;

  return (
    <section className="hero">
      <div className="hero__bg" />
      <div className="container hero__inner">
        <div>
          <span className="eyebrow">Breach intelligence · Real-time</span>
          <h1 style={{ marginTop: 18 }}>
            {h.lead} <span className="hl">{h.emph}</span>
          </h1>
          <p className="hero__sub">Breach Monitor scans breach repositories for your organization's exposed credentials and alerts you the moment they appear so you can act before attackers do.



          </p>
          <div className="hero__cta">
            <a href="#pricing" className="btn btn-primary btn-lg btn-arrow"
            onClick={(e) => {e.preventDefault();navigate("pricing");}}>
              Start monitoring
            </a>
            <a href="#features" className="btn btn-ghost btn-lg"
            onClick={(e) => {e.preventDefault();navigate("features");}}>
              See how it works
            </a>
          </div>
          <div className="hero__meta">
            <span><Icon name="check" size={14} /> No credit card to start</span>
            <span><Icon name="check" size={14} /> Setup in under 5 minutes</span>
            <span><Icon name="check" size={14} /> Cancel anytime</span>
          </div>
        </div>
        <div className="hero__visual">
          <TerminalAlert />
        </div>
      </div>
    </section>);

};

const TerminalAlert = () => {
  const [step, setStep] = useState(0);
  useEffect(() => {
    const t = setTimeout(() => setStep((s) => Math.min(s + 1, 6)), 700);
    return () => clearTimeout(t);
  }, [step]);

  return (
    <div className="terminal" role="img" aria-label="Example breach alert email">
      <div className="terminal__bar">
        <span className="terminal__dots">
          <span className="terminal__dot" style={{ ['--c']: '#ff5f56' }}></span>
          <span className="terminal__dot" style={{ ['--c']: '#ffbd2e' }}></span>
          <span className="terminal__dot" style={{ ['--c']: '#27c93f' }}></span>
        </span>
        <span className="terminal__title">alert · acme-corp.com</span>
      </div>
      <div className="terminal__body">
        {step >= 0 && <span className="terminal__line"><span className="prompt">$</span> breach-monitor scan --domain acme-corp.com</span>}
        {step >= 1 && <span className="terminal__line dim">→ scanning repositories...</span>}
        {step >= 2 && <span className="terminal__line dim">→ cross-referencing 1.2M credential records</span>}
        {step >= 3 && <span className="terminal__line"><span className="alert">⚠ exposure detected</span></span>}
        {step >= 4 && <span className="terminal__line"><span className="dim">  user:</span> <span className="strong">j.smith@acme-corp.com</span></span>}
        {step >= 4 && <span className="terminal__line"><span className="dim">  source:</span> <span className="strong">payroll-vendor.com (2026-04-22)</span></span>}
        {step >= 4 && <span className="terminal__line"><span className="dim">  severity:</span> <span className="alert">high · plaintext password</span></span>}
        {step >= 5 && <span className="terminal__line ok">✓ alert dispatched to security@acme-corp.com</span>}
        {step >= 6 && <span className="terminal__line ok">✓ remediation steps attached</span>}
        <span className="terminal__line"><span className="prompt">$</span><span className="cursor"></span></span>
      </div>
    </div>);

};

/* ============================================
   Stats
   ============================================ */
const Stats = () =>
<section className="stats" style={{ padding: 0 }}>
    <div className="container">
      <div className="stats__grid">
        <div className="stat">
          <div className="stat__num"><Counter to={12000} suffix="+" /></div>
          <div className="stat__label">Breaches in the past 10 years exposing business credentials</div>
          <div className="stat__src">Source · IBM X-Force, 2025</div>
        </div>
        <div className="stat">
          <div className="stat__num"><Counter to={81} /><span className="unit">%</span></div>
          <div className="stat__label">Of breaches start with stolen or compromised credentials</div>
          <div className="stat__src">Source · Verizon DBIR, 2025</div>
        </div>
        <div className="stat">
          <div className="stat__num"><span className="unit" style={{ marginLeft: 0 }}>$</span><Counter to={4.88} decimals={2} /><span className="unit">m</span></div>
          <div className="stat__label">Average cost of a single data breach to a mid-market company</div>
          <div className="stat__src">Source · Ponemon, 2025</div>
        </div>
      </div>
    </div>
  </section>;


/* ============================================
   Animated Attack Chain
   ============================================ */
const AttackChain = () => {
  const [active, setActive] = useState(0);
  useEffect(() => {
    const i = setInterval(() => setActive((a) => (a + 1) % 5), 2000);
    return () => clearInterval(i);
  }, []);

  const steps = [
  { icon: "globe", title: "Third-party breach", desc: "An external service your team uses gets compromised." },
  { icon: "key", title: "Credentials leak", desc: "Reused business email + password lands in a breach dump." },
  { icon: "search", title: "Attackers enumerate", desc: "Threat actors scrape leaks for corporate domains." },
  { icon: "alert", title: "Account takeover", desc: "Credential stuffing or direct login on your systems." },
  { icon: "shield", title: "Breach Monitor", desc: "We catch the leak first and alert you — before step 4 ever happens.", shield: true }];


  return (
    <section id="how-it-works">
      <div className="container">
        <Reveal className="section-header">
          <span className="eyebrow">The attack chain</span>
          <h2>How credential breaches turn into your incident.</h2>
          <p>Most data breaches aren't sophisticated zero-days. They start somewhere else, at a vendor, a SaaS tool, a forum signup, and end at your front door.</p>
        </Reveal>
        <Reveal delay={120}>
          <div className="chain-wrap">
            <div className="chain-pulse" />
            <div className="chain-grid">
              {steps.map((s, i) =>
              <div key={i} className={`chain-step ${active === i ? "active" : ""} ${s.shield ? "shield" : ""}`}>
                  <div className="chain-step__icon">
                    <Icon name={s.icon} size={18} />
                  </div>
                  <div className="chain-step__idx">STEP {String(i + 1).padStart(2, "0")}</div>
                  <div className="chain-step__title">{s.title}</div>
                  <div className="chain-step__desc">{s.desc}</div>
                </div>
              )}
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

};

/* ============================================
   Features grid
   ============================================ */
const Features = () => {
  const items = [
  { icon: "bell", title: "Real-time email alerts", desc: "The moment a credential matching your domain appears in a breach, we send a detailed alert to your security inbox." },
  { icon: "database", title: "Extensive datawell coverage", desc: "The moment a credential matching your domain appears in a breach, we send a detailed alert to your security inbox." },
  { icon: "report", title: "Monthly breach digests", desc: "The moment a credential matching your domain appears in a breach, we send a detailed alert to your security inbox." },
  { icon: "user", title: "Per-user remediation", desc: "Each alert includes the affected user, the breach source, exposed data, and step-by-step remediation guidance." },
  { icon: "lock", title: "Zero credentials needed", desc: "The moment a credential matching your domain appears in a breach, we send a detailed alert to your security inbox." },
  { icon: "target", title: "Built by red teamers", desc: "The same intelligence offensive security pros use against companies, working for you instead." }];

  return (
    <section id="features-section">
      <div className="container">
        <Reveal className="section-header">
          <span className="eyebrow">What you get</span>
          <h2>Everything you need to catch leaks early.</h2>
          <p>No dashboards to babysit. No noisy false positives. Just clear, actionable alerts when something matters.</p>
        </Reveal>
        <div className="features-grid">
          {items.map((it, i) =>
          <Reveal key={i} delay={i * 80}>
              <div className="feature-card">
                <div className="feature-card__icon"><Icon name={it.icon} size={20} /></div>
                <h3>{it.title}</h3>
                <p>{it.desc}</p>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

};

/* ============================================
   Why Us — split with comparison table
   ============================================ */
const WhyUs = () =>
<section>
    <div className="container">
      <div className="why">
        <div>
          <Reveal>
            <span className="eyebrow">Why Breach Monitor</span>
            <h2 style={{ marginTop: 14 }}>Enterprise-grade intelligence. Without enterprise pricing.</h2>
            <p className="lead" style={{ marginTop: 20 }}>
              Most breach intelligence tools are built for Fortune 500 SOCs — and priced like it.
              Breach Monitor delivers the same signal, packaged for the way real teams actually work.
            </p>
          </Reveal>
          <Reveal delay={150}>
            <ul className="why-list" style={{ marginTop: 32 }}>
              <li><span className="num">01</span><div className="body"><strong>Same intel attackers use</strong><span>We're red teamers. We use this data offensively. Now it works for you.</span></div></li>
              <li><span className="num">02</span><div className="body"><strong>Proactive, not reactive</strong><span>Catch exposed credentials before they're weaponized, not after the breach hits.</span></div></li>
              <li><span className="num">03</span><div className="body"><strong>Done-for-you alerts</strong><span>No manual searching, per-user lookups, or dashboard babysitting. Just clean email alerts.</span></div></li>
              <li><span className="num">04</span><div className="body"><strong>Affordable for any team</strong><span>SMB-friendly pricing. MSP volume tiers.</span></div></li>
            </ul>
          </Reveal>
        </div>
        <Reveal delay={200}>
          <div className="compare">
            <table>
              <thead>
                <tr>
                  <th></th>
                  <th className="brand-col center">Breach Monitor</th>
                  <th className="center">Free tools</th>
                  <th className="center">Enterprise SIEM</th>
                </tr>
              </thead>
              <tbody>
                <tr><td className="label">Real-time alerts</td>
                    <td className="center"><Icon name="check" size={16} /></td>
                    <td className="center"><span className="x"><Icon name="x" size={14} /></span></td>
                    <td className="center"><Icon name="check" size={16} /></td></tr>
                <tr><td className="label">Domain-wide monitoring</td>
                    <td className="center"><Icon name="check" size={16} /></td>
                    <td className="center"><span className="x"><Icon name="x" size={14} /></span></td>
                    <td className="center"><Icon name="check" size={16} /></td></tr>
                <tr><td className="label">Dark-web sources</td>
                    <td className="center"><Icon name="check" size={16} /></td>
                    <td className="center"><span className="x"><Icon name="x" size={14} /></span></td>
                    <td className="center"><Icon name="check" size={16} /></td></tr>
                <tr><td className="label">Remediation guidance</td>
                    <td className="center"><Icon name="check" size={16} /></td>
                    <td className="center"><span className="x"><Icon name="x" size={14} /></span></td>
                    <td className="center"><span className="x"><Icon name="x" size={14} /></span></td></tr>
                <tr><td className="label">Setup time</td>
                    <td className="center"><span className="mono">&lt; 5 min</span></td>
                    <td className="center"><span className="mono">manual</span></td>
                    <td className="center"><span className="mono">weeks</span></td></tr>
                <tr><td className="label">Monthly cost</td>
                    <td className="center"><span style={{ color: "var(--brand)", fontWeight: 600 }}>from $99</span></td>
                    <td className="center"><span className="label">$0</span></td>
                    <td className="center"><span className="label">$2k+</span></td></tr>
              </tbody>
            </table>
          </div>
        </Reveal>
      </div>
    </div>
  </section>;


/* ============================================
   FAQ
   ============================================ */
const FAQ = ({ items }) => {
  const [open, setOpen] = useState(0);
  return (
    <section>
      <div className="container container-narrow">
        <Reveal className="section-header text-center" style={{ margin: "0 auto 48px" }}>
          <div className="text-center">
            <span className="eyebrow no-rule" style={{ justifyContent: "center" }}>Questions</span>
          </div>
          <h2 style={{ textAlign: "center" }}>Frequently asked.</h2>
        </Reveal>
        <div className="faq-list">
          {items.map((it, i) =>
          <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-toggle"><Icon name="plus" size={14} /></span>
              </button>
              <div className="faq-a"><p>{it.a}</p></div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

/* ============================================
   CTA Banner
   ============================================ */
const CTABanner = ({ navigate }) =>
<section>
    <div className="container">
      <Reveal>
        <div className="cta-banner">
          <div className="cta-banner__bg" />
          <span className="eyebrow no-rule" style={{ justifyContent: "center" }}>Ready when you are</span>
          <h2>Every day without monitoring is a day attackers have the advantage.</h2>
          <p>Join organizations using Breach Monitor to stay one step ahead of credential-based attacks.</p>
          <div className="actions">
            <a href="#pricing" className="btn btn-primary btn-lg btn-arrow"
          onClick={(e) => {e.preventDefault();navigate("pricing");}}>
              Start monitoring
            </a>
            <a href="#contact" className="btn btn-ghost btn-lg"
          onClick={(e) => {e.preventDefault();navigate("contact");}}>
              Talk to us
            </a>
          </div>
        </div>
      </Reveal>
    </div>
  </section>;


window.Hero = Hero;
window.Stats = Stats;
window.AttackChain = AttackChain;
window.Features = Features;
window.WhyUs = WhyUs;
window.FAQ = FAQ;
window.CTABanner = CTABanner;