/* global React, Icon, Reveal, Hero, Stats, AttackChain, Features, WhyUs, FAQ, CTABanner */
const { useState, useEffect } = React;

/* ============================================
   HOME
   ============================================ */
const HomePage = ({ navigate, headlineVariant }) =>
<main>
    <Hero navigate={navigate} headlineVariant={headlineVariant} />
    <Stats />
    <AttackChain />
    <Features />
    <WhyUs />
    <FAQ items={[
  { q: "Do I need to install anything?", a: "No. Breach Monitor monitors your domain — not your accounts. Add a domain, verify ownership, and you're done. No agents, no integrations, no API keys, no passwords." },
  { q: "How fast will I be alerted?", a: "Notification cadence depends on your plan. The Free tier delivers monthly alerts, Basic delivers weekly, and Enhanced, MSP, and Enterprise deliver daily alerts — so you can match how quickly you hear about new exposures to your team's needs and budget." },
  { q: "What's actually in an alert?", a: "Each alert names the affected user, the breach source and date, the type of data exposed (email, password hash, plaintext password, PII), the severity, and a tailored remediation checklist for your team." },
  { q: "Can I cancel anytime?", a: "Yes — monthly plans are month-to-month. Annual plans can be cancelled at the end of the term. No contracts, no minimums." }]
  } />
    <CTABanner navigate={navigate} />
  </main>;


/* ============================================
   FEATURES PAGE
   ============================================ */
const FeaturesPage = ({ navigate }) =>
<main>
    <section className="page-hero">
      <div className="container">
        <span className="eyebrow">Features</span>
        <h1 style={{ marginTop: 18 }}>Everything Breach Monitor does for you.</h1>
        <p>One job, done well: catch your organization's credentials in breaches before attackers can use them. Here's how.</p>
      </div>
    </section>
    <Features />
    <section style={{ paddingTop: 0 }}>
      <div className="container">
        <Reveal className="section-header" style={{ marginTop: 64 }}>
          <span className="eyebrow">Anatomy of an alert</span>
          <h2>What you'll actually receive in your inbox.</h2>
          <p>No dashboard logins. No noisy notifications. A real, useful alert with everything you need to act.</p>
        </Reveal>
        <Reveal delay={120}>
          <AlertSample />
        </Reveal>
      </div>
    </section>
    <AttackChain />
    <CTABanner navigate={navigate} />
  </main>;


const AlertSample = () =>
<div style={{
  maxWidth: 720, margin: "0 auto",
  background: "var(--bg-elev)", border: "1px solid var(--border)",
  borderRadius: "var(--r-lg)", overflow: "hidden"
}}>
    <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border-soft)", display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 13, color: "var(--fg-muted)" }}>
      <span><strong style={{ color: "var(--fg)" }}>From:</strong> alerts@breachmonitor.app</span>
      <span className="mono" style={{ fontSize: 11, color: "var(--fg-dim)" }}>2026-04-28 · 14:22 UTC</span>
    </div>
    <div style={{ padding: "24px 28px" }}>
      <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "4px 10px", background: "color-mix(in oklab, var(--threat) 18%, transparent)", color: "var(--threat)", borderRadius: 4, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 16 }}>
        <Icon name="alert" size={12} /> High Severity
      </div>
      <h3 style={{ fontSize: 22 }}>3 credentials exposed in payroll-vendor.com breach</h3>
      <p style={{ marginTop: 12, color: "var(--fg-muted)", fontSize: 15, lineHeight: 1.6 }}>
        Three of your monitored users at <strong style={{ color: "var(--fg)" }}>acme-corp.com</strong> appeared
        in a credential dump tied to the recent payroll-vendor.com breach. Plaintext passwords were exposed.
      </p>
      <div style={{ marginTop: 20, fontFamily: "var(--font-mono)", fontSize: 13, background: "var(--bg-inset)", padding: 16, borderRadius: 6, border: "1px solid var(--border-soft)", color: "var(--fg-muted)" }}>
        <div>USER &nbsp;&nbsp;&nbsp; j.smith@acme-corp.com</div>
        <div>USER &nbsp;&nbsp;&nbsp; m.chen@acme-corp.com</div>
        <div>USER &nbsp;&nbsp;&nbsp; r.patel@acme-corp.com</div>
        <div style={{ marginTop: 12, color: "var(--fg-dim)" }}>SOURCE &nbsp; payroll-vendor.com (2026-04-22)</div>
        <div style={{ color: "var(--fg-dim)" }}>EXPOSED  email · plaintext password</div>
      </div>
      <div style={{ marginTop: 20, color: "var(--fg-muted)", fontSize: 14 }}>
        <strong style={{ color: "var(--fg)" }}>Recommended actions</strong>
        <ol style={{ margin: "10px 0 0", paddingLeft: 20, lineHeight: 1.7 }}>
          <li>Force password reset for the three affected users.</li>
          <li>Verify MFA is enrolled and enforced on all SSO-connected apps.</li>
          <li>Check authentication logs for sign-in attempts since 2026-04-22.</li>
        </ol>
      </div>
    </div>
  </div>;


/* ============================================
   PRICING PAGE
   ============================================ */
const PricingPage = ({ navigate }) => {
  const plans = [
  { name: "Free", price: "$0", period: "Free forever", desc: "Get started with proactive breach monitoring at no cost.", features: ["1 email domain", "0–100 employees", "Public breach data monitoring", "Monthly notifications", "Monthly breach digest"] },
  { name: "Basic", price: "$99", period: "per month", popular: true, desc: "For small businesses needing more frequent alerts and broader coverage.", features: ["1 email domain", "0–500 employees", "Public breach data monitoring", "Dark web data monitoring", "Weekly notifications", "Monthly breach digest", "Custom monitoring"] },
  { name: "Enhanced", price: "$299", period: "per month", desc: "For growing companies that need daily alerts across multiple domains.", features: ["1 email domain", "500+ employees", "Public breach data monitoring", "Dark web data monitoring", "Daily notifications", "Monthly breach digest", "Historical breach data report", "Custom monitoring"] },
  { name: "MSP", price: "$699", period: "per client / year", desc: "For service providers monitoring multiple clients from one dashboard.", features: ["Client dashboard view", "Fully automated monitoring", "Alerts to MSP and/or client", "Public breach data monitoring", "Dark web data monitoring", "Weekly notifications", "Monthly breach digest", "Historical breach data report"] },
  { name: "Enterprise", price: "Custom", period: "Let's talk", desc: "For larger organizations needing tailored coverage and SLAs.", features: ["2+ email domains", "1,000+ employees", "Public breach data monitoring", "Dark web data monitoring", "Real-time notifications", "Monthly breach digest", "Historical breach data report", "Custom monitoring"] }];


  return (
    <main>
      <section className="page-hero">
        <div className="container text-center">
          <span className="eyebrow no-rule" style={{ justifyContent: "center" }}>Pricing</span>
          <h1 style={{ marginTop: 18, textAlign: "center" }}>Honest pricing. No commitments.</h1>
          <p style={{ marginLeft: "auto", marginRight: "auto", textAlign: "center" }}>
            Pick a plan, add a domain, start receiving alerts. Cancel any time.
          </p>
        </div>
      </section>
      <section style={{ paddingTop: 64 }}>
        <div className="container text-center">
          <p style={{ marginTop: 0, marginBottom: 32, color: "var(--fg-muted)", fontSize: 15 }}>
            All plans include breach database monitoring, email alerts, and actionable guidance.
            <br />As long as you remain a customer, we won't increase your price.
          </p>
          <div className="pricing-grid pricing-grid--4">
            {plans.map((p, i) =>
            <Reveal key={p.name} delay={i * 80}>
                <div className={`plan ${p.popular ? "popular" : ""}`}>
                  {p.popular && <div className="plan__badge">Most Popular</div>}
                  <div className="plan__name">{p.name}</div>
                  <div className="plan__price">
                    <span className="amount">{p.price}</span>
                    {p.period && <span className="period">{p.period}</span>}
                  </div>
                  <div className="plan__desc">{p.desc}</div>
                  <ul className="plan__features">
                    {p.features.map((f, j) =>
                  <li key={j}><span>{f}</span></li>
                  )}
                  </ul>
                  <div className="plan__cta">
                    <a href={p.name === "Enterprise" ? "#contact" : "https://protect.auth.breachmonitor.app/signup"}
                  className={`btn ${p.popular ? "btn-primary" : "btn-ghost"} btn-arrow`}
                  style={{ width: "100%" }}
                  onClick={(e) => {if (p.name === "Enterprise") {e.preventDefault();navigate("contact");}}}>
                      {p.name === "Enterprise" ? "Contact us" : p.name === "Free" ? "Start for free" : "Get started"}
                    </a>
                  </div>
                </div>
              </Reveal>
            )}
          </div>
          <p style={{ marginTop: 40, color: "var(--fg-dim)", fontSize: 14 }}>
            Need more domains, on-prem deployment, or custom SLAs? <a style={{ color: "var(--brand)" }} href="#contact" onClick={(e) => {e.preventDefault();navigate("contact");}}>Talk to us →</a>
          </p>
        </div>
      </section>
      <FAQ items={[
      { q: "Is there a free plan?", a: "Yes — our Free tier includes 1 email domain, up to 100 employees, public breach data monitoring, monthly notifications, and a monthly breach digest. No credit card required." },
      { q: "What counts as a 'domain'?", a: "A registered email domain you own, e.g. acme-corp.com. If you have multiple brands or business units, each top-level domain counts as one." },
      { q: "Will my price ever increase?", a: "No. As long as you remain a customer, your price is locked. We won't raise your subscription cost." },
      { q: "Can I switch plans later?", a: "Yes. Upgrade or downgrade any time from your account settings. Plan changes prorate automatically." }]
      } />
      <CTABanner navigate={navigate} />
    </main>);

};

/* ============================================
   ABOUT
   ============================================ */
const AboutPage = ({ navigate }) =>
<main>
    <section className="page-hero">
      <div className="container">
        <span className="eyebrow">About</span>
        <h1 style={{ marginTop: 18 }}>We break into companies for a living.</h1>
        <p>Breach Monitor was built by offensive security professionals who use compromised credentials as a primary attack vector on every engagement and got tired of watching the same preventable breaches happen.</p>
      </div>
    </section>
    <section>
      <div className="container">
        <div className="prose">
          <h2>Why we built this.</h2>
          <p>For years, we've sat across from CISOs and IT directors after pen-test engagements showing them the same finding: <strong>your team's credentials are already on the internet.</strong> Sometimes from a SaaS vendor breach. Sometimes from a forum signup using a work email. Sometimes from a service that got popped years ago and no one ever told them.</p>
          <p>The intelligence to catch this exists and attackers use it daily. But the tools to surface it for defenders were either expensive enterprise platforms locked behind six-figure contracts, or free services that required manual lookups one user at a time.</p>
          <p>We built Breach Monitor to close that gap. The same intelligence we use against companies, packaged for the defenders, priced for organizations of any size.</p>
          <h2>The principles.</h2>
          <h3>Practitioner-built.</h3>
          <p>Every alert, every digest, every piece of remediation guidance comes from people who have run thousands of penetration tests. We know what attackers actually do with this data because we do it ourselves.</p>
          <h3>Proactive, not reactive.</h3>
          <p>Most security tooling tells you about a breach after attackers are already inside. Breach Monitor tells you about exposure <em>before</em> it's weaponized. The window between leak and attack is where this product lives.</p>
          <h3>Accessible to every team.</h3>
          <p>SMBs are the most-targeted, least-protected segment in cybersecurity. Pricing this kind of intelligence out of reach for them is part of the problem. We refuse to do it.</p>
        </div>
      </div>
    </section>
    <CTABanner navigate={navigate} />
  </main>;


/* ============================================
   CONTACT
   ============================================ */
const ContactPage = ({ navigate }) => {
  const [form, setForm] = useState({ name: "", email: "", company: "", topic: "general", message: "" });
  const [status, setStatus] = useState(null);

  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) {
      setStatus({ type: "error", text: "Please fill in your name, email, and message." });
      return;
    }
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) {
      setStatus({ type: "error", text: "Please enter a valid email address." });
      return;
    }
    setStatus({ type: "success", text: "Thanks — we'll get back to you within one business day." });
    setForm({ name: "", email: "", company: "", topic: "general", message: "" });
  };

  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <span className="eyebrow">Contact</span>
          <h1 style={{ marginTop: 18 }}>Let's talk.</h1>
          <p>Questions about coverage, custom plans, or whether Breach Monitor is right for your team? Drop us a note.</p>
        </div>
      </section>
      <section>
        <div className="container">
          <div className="contact-grid">
            <div className="contact-info">
              <div className="item">
                <h4><Icon name="mail" size={11} /> &nbsp;Email</h4>
                <p><a style={{ color: "var(--brand)" }} href="mailto:hello@breachmonitor.app">hello@breachmonitor.app</a></p>
                <p>For sales, support, or general inquiries.</p>
              </div>
              <div className="item">
                <h4><Icon name="phone" size={11} /> &nbsp;Phone</h4>
                <p><a style={{ color: "var(--brand)" }} href="tel:8772625835">877-262-5835</a></p>
                <p>Monday–Friday, 9am–5pm Eastern.</p>
              </div>
              <div className="item">
                <h4><Icon name="pin" size={11} /> &nbsp;Mail</h4>
                <p>235 Harrison St. Suite 128</p>
                <p>Syracuse, NY 13202</p>
              </div>
              <div className="item">
                <h4><Icon name="alert" size={11} /> &nbsp;Security disclosure</h4>
                <p><a style={{ color: "var(--brand)" }} href="mailto:security@breachmonitor.app">security@breachmonitor.app</a></p>
                <p>For coordinated vulnerability disclosure.</p>
              </div>
            </div>
            <form className="form" onSubmit={submit} noValidate>
              <div className="form-row">
                <label>Name</label>
                <input type="text" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Jane Doe" />
              </div>
              <div className="form-row">
                <label>Work email</label>
                <input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="jane@acme-corp.com" />
              </div>
              <div className="form-row">
                <label>Company (optional)</label>
                <input type="text" value={form.company} onChange={(e) => setForm({ ...form, company: e.target.value })} placeholder="Acme Corp" />
              </div>
              <div className="form-row">
                <label>What's this about?</label>
                <select value={form.topic} onChange={(e) => setForm({ ...form, topic: e.target.value })}>
                  <option value="general">General inquiry</option>
                  <option value="sales">Sales / pricing</option>
                  <option value="support">Support</option>
                  <option value="msp">MSP partnership</option>
                  <option value="security">Security disclosure</option>
                </select>
              </div>
              <div className="form-row">
                <label>Message</label>
                <textarea value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} placeholder="Tell us a bit about what you're looking for..." />
              </div>
              {status && <div className={status.type === "error" ? "form-error" : "form-success"}>{status.text}</div>}
              <button type="submit" className="btn btn-primary btn-arrow">Send message</button>
            </form>
          </div>
        </div>
      </section>
    </main>);

};

window.HomePage = HomePage;
window.FeaturesPage = FeaturesPage;
window.PricingPage = PricingPage;
window.AboutPage = AboutPage;
window.ContactPage = ContactPage;