/* FireStrike marketing-site components.
   All visual rules live in site.css; this file is structure + behavior. */

const { useState, useEffect, useRef } = React;

/* ---------- atoms ---------- */

const Icon = ({ name, size = 20, stroke = 1.75, className }) => {
  const paths = {
    shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>,
    arrowRight: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    check: <polyline points="20 6 9 17 4 12"/>,
    checkCircle: <><circle cx="12" cy="12" r="10"/><path d="M9 12l2 2 4-4"/></>,
    activity: <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>,
    eye: <><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></>,
    cog: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h.01a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v.01a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
    close: <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    pulse: <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>,
    file: <><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"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24"
      fill="none" stroke="currentColor"
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
      className={className} aria-hidden="true">
      {paths[name] || null}
    </svg>
  );
};

const Eyebrow = ({ children }) => <span className="fs-eyebrow">{children}</span>;

const Button = ({ variant = 'primary', size, onNavy, children, onClick, href }) => {
  const cn = `fs-btn ${variant} ${size ? size : ''} ${onNavy ? 'on-navy' : ''}`.trim();
  const Tag = href ? 'a' : 'button';
  return (
    <Tag className={cn} href={href} onClick={onClick}>
      {children}
      {variant === 'ghost' && <Icon name="arrowRight" size={16} />}
    </Tag>
  );
};

/* ---------- Flame motif ---------- */

const Flame = ({ className, style, sparkColor }) => (
  <svg className={`fs-flame ${className || ''}`}
       viewBox="0 0 304.64 468.37" style={style}
       fill="currentColor" aria-hidden="true">
    <path d="M193.21,0s127.87,58.23,61.41,207.62c0,0-17.8,41.12-58.71,72.88-2.77,2.15-5.63,4.2-8.54,6.16-15.03,10.12-105.85,75.8-99.36,181.72,0,0-122.33-47.71-78.54-196.18,0,0,14.81-59.34,85.12-112.09,1.65-1.24,3.4-2.36,5.2-3.37,16.48-9.3,108.22-65.52,93.43-156.73Z"
          stroke="currentColor" strokeWidth="0.5" fill="currentColor" pathLength="1200" />
    <path d="M293.55,239.07s39.95,73.48-31.81,118.14c0,0-36.77,22.89-45.14,45.54,0,0-23.53-47.42,21.15-87.02,0,0,49.59-40.4,55.8-76.66Z"
          fill={sparkColor || 'currentColor'} stroke="currentColor" strokeWidth="0.5" pathLength="1200" />
  </svg>
);

/* ---------- Nav ---------- */

const Nav = ({ onBook }) => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 24);
    on(); window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <nav className={`fs-nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="fs-shell inner">
        <a className="brand" href="#top">
          <img src="assets/firestrike-logo-horizontal.png" alt="FireStrike" />
        </a>
        <div className="links">
          <a href="#services">Services</a>
          <a href="#process">How we work</a>
          <a href="#problem">The problem</a>
          <a href="#contact">Contact</a>
        </div>
        <Button onClick={onBook}>Book a discovery call <Icon name="arrowRight" size={14} /></Button>
      </div>
    </nav>
  );
};

/* ---------- Hero ---------- */

const Hero = ({ onBook }) => (
  <header className="fs-hero on-navy" id="top">
    <div className="fs-shell grid">
      <div>
        <Eyebrow>Cybersecurity · AI · Automation</Eyebrow>
        <h1>The <span className="acc">alerts-to-actions</span> problem, solved.</h1>
        <p className="lede">
          Your security stack. Connected. Finally. We build AI-powered automation that unifies
          your SIEM, EDR, SOAR, identity, and cloud tools into a single coherent operation.
          No more swivel-chair between twelve tabs. No theater. Just the work, done.
        </p>
        <div className="actions">
          <Button size="lg" onClick={onBook}>Book a discovery call <Icon name="arrowRight" size={16} /></Button>
          <Button variant="secondary" size="lg" onNavy href="#services">See the solutions</Button>
        </div>
      </div>
      <div className="curve-wrap" aria-hidden="true">
        <Flame className="flame f1" />
        <Flame className="flame f2" />
      </div>
    </div>
  </header>
);

/* ---------- Security tools marquee ---------- */

const SecurityMarquee = () => {
  const logos = {
    'CrowdStrike': 'crowdstrike.svg',
    'Splunk': 'splunk.svg',
    'SentinelOne': 'sentinelone.svg',
    'Palo Alto': 'paloalto.svg',
    'Fortinet': 'fortinet.svg',
    'Okta': 'okta.svg',
    'Cloudflare': 'cloudflare.svg',
    'Microsoft Defender': 'defender.svg',
    'AWS': 'aws.svg',
    'Azure': 'azure.svg',
    'Google Cloud': 'gcp.svg',
    'Zscaler': 'zscaler.svg',
    'Rapid7': 'rapid7.svg',
    'Tenable': 'tenable.svg',
    'Proofpoint': 'proofpoint.svg',
    'ServiceNow': 'servicenow.svg',
    'PagerDuty': 'pagerduty.svg',
    'Infisical': 'infisical.svg',
  };
  const items = Object.entries(logos).map(([name, file]) => (
    <span key={name} className="item">
      <img src={`assets/logos/${file}`} alt={name} />
    </span>
  ));
  return (
    <div className="fs-marquee">
      <div className="inner">
        <span className="label">Integrates with</span>
        <div className="scroll">
          <div className="track">{items}{items}</div>
        </div>
      </div>
      <div className="mask" />
    </div>
  );
};

/* ---------- Problem section ---------- */

const ProblemSection = () => (
  <section className="fs-services" id="problem" style={{background:'var(--fs-bg-alt)'}}>
    <div className="fs-shell">
      <div className="fs-shead">
        <Eyebrow>The problem · The cost of the gap</Eyebrow>
        <h2>Every security team is working in the <span className="acc">gap</span>.</h2>
        <p>Your SOC runs a dozen disconnected tools. Alerts fire in one system, context lives in another, response happens in a third. Manual handoffs between them create friction, slow work, increase errors, and hide costs in every shift.</p>
      </div>
      <div className="cards">
        <div className="fs-svccard stat">
          <div className="stat-num">$1.5–2M</div>
          <h3>Saved by MSSP clients annually</h3>
          <p>Consolidated tooling, offloaded SOAR, and eliminated swivel-chair analysis. One pane. One workflow. One cost line.</p>
        </div>
        <div className="fs-svccard stat">
          <div className="stat-num">100%</div>
          <h3>Case completion rate</h3>
          <p>Every alert triaged, enriched, and closed — no backlog, no dropped incidents, no "we'll get to it Monday."</p>
        </div>
        <div className="fs-svccard stat">
          <div className="stat-num"></div>
          <h3>An expert teammate for every analyst</h3>
          <p>AI co-pilot that knows your stack, writes your queries, and closes the loop. Every analyst operates at senior level.</p>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- Service cards ---------- */

const SERVICES = [
  {
    icon: 'shield',
    title: 'Security tool integration',
    body: 'We connect your security stack. A custom integration layer across SIEM, EDR, SOAR, identity, and cloud platforms with no vendor lock-in. Cross-platform data bridges, bidirectional sync, and scoped connector builds.',
    result: '12 tools → 1 pane in 90 days',
  },
  {
    icon: 'cog',
    title: 'Security operations automation',
    body: 'We eliminate the manual. Playbooks and workflows that remove unnecessary human steps between alert and action. Event-to-action runbooks, auto-routing with enrichment, and human-in-the-loop design where stakes are high.',
    result: '4,000 cases closed a week without drastically increasing your headcount, maximizing what your team can do today',
  },
  {
    icon: 'activity',
    title: 'AI workflow build',
    body: 'We deploy intelligence. Custom AI workflows that classify, triage, and autonomously resolve routine alerts so your analysts focus on high-value incidents. LLM-assisted decision agents, smart deduplication, and guardrails.',
    result: 'MTTR reduced 60% in first quarter',
  },
  {
    icon: 'eye',
    title: 'Gap analysis',
    body: 'We find what is missing before it matters. Architecture review and stack mapping that expose blind spots, data drops, and coverage holes — with a scoped remediation plan.',
    result: '3 critical blind spots found in 48 hours',
  },
];

const ServiceCards = () => (
  <section className="fs-services" id="services">
    <div className="fs-shell">
      <div className="fs-shead">
        <Eyebrow>What we do</Eyebrow>
        <h2>Map. Connect. <span className="acc">Automate.</span></h2>
        <p>Four precise offerings that create an intelligence layer across your existing security systems, replacing manual handoffs with trusted automation.</p>
      </div>
      <div className="cards">
        {SERVICES.map((s, i) => (
          <article key={i} className={`fs-svccard ${i === SERVICES.length - 1 ? 'wide' : ''}`}>
            <div className="icon"><Icon name={s.icon} size={22} /></div>
            <h3>{s.title}</h3>
            <p>{s.body}</p>
            {s.result && (
              <p style={{ color: 'var(--fs-blue-600)', fontWeight: 700, marginTop: 12 }}>{s.result}</p>
            )}
            <a className="link" href={`/services/${s.title.toLowerCase().replace(/ /g, '-').replace(/[^a-z0-9-]/g, '')}.html`}>Learn more <Icon name="arrowRight" size={14} /></a>
          </article>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- Process ---------- */

const ProcessStrip = () => {
  const steps = [
    { n: '01', t: 'Discovery', d: 'Map the stack. Interviews and architecture review produce a signed Architecture doc.' },
    { n: '02', t: 'Audit', d: 'Find the gap. Gap analysis identifying where alerts drop, work stalls, and automation is missing. Gap report delivered.' },
    { n: '03', t: 'Build', d: 'Close the gap. The integration layer and workflows are constructed and tested against real data, with a staged rollout.' },
    { n: '04', t: 'Deploy', d: 'Ship it. Monitor. Production cutover includes training, a 30-day assisted period, a signed runbook, and optional support.' },
  ];
  return (
    <section className="fs-process" id="process">
      <div className="fs-shell">
        <div className="fs-shead">
          <Eyebrow>How we work</Eyebrow>
          <h2>Discovery. Audit. Build. <span className="acc">Deploy.</span></h2>
          <p>Every phase is a signed deliverable. No scope creep. No surprise invoices.</p>
        </div>
        <div className="steps">
          {steps.map(s => (
            <div key={s.n} className="fs-step">
              <span className="num">STEP {s.n}</span>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---------- Assessment teaser ---------- */

const AssessmentTeaser = ({ onBook }) => (
  <section className="fs-teaser" id="assessment">
    <div className="fs-shell grid">
      <div className="copy">
        <Eyebrow>Gap analysis</Eyebrow>
        <h2>Where you stand, <span style={{ color: 'var(--fs-blue-600)' }}>in one audit</span>.</h2>
        <p>The shortest honest answer to "how exposed are we?" you'll find. We map your security stack, identify where alerts drop and work stalls, and deliver a scoped plan to close the gap.</p>
        <ul className="ck">
          <li><Icon name="check" size={20}/>4 – 6 week engagement</li>
          <li><Icon name="check" size={20}/>≤ 6 hours of your team's time, total</li>
          <li><Icon name="check" size={20}/>Signed Architecture doc + Gap report</li>
          <li><Icon name="check" size={20}/>Staging deploy and go-live runbook</li>
        </ul>
        <div style={{ display: 'flex', gap: 12, marginTop: 8 }}>
          <Button onClick={onBook}>Start with a gap audit</Button>
          <Button variant="ghost" href="/sample-report.html">See a sample report</Button>
        </div>
      </div>
      <div className="tile">
        <div className="pat"><Flame /></div>
        <div className="top">
          <img src="assets/firestrike-shield.png" alt="" />
          <div className="h">FireStrike<br/>Gap Report</div>
        </div>
        <div className="bot">
          <div className="big">From&nbsp;$12k.<br/>No retainer required.</div>
          <div className="sub">One fixed fee. Scoped before you sign. Walks if it isn't a fit.</div>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- CTA banner ---------- */

const CTA = ({ onBook }) => (
  <section className="fs-cta on-navy" id="contact">
    <div className="fs-shell">
      <Eyebrow>Ready to solve for X?</Eyebrow>
      <h2>Let's talk about what's actually <span className="acc">exposed</span>.</h2>
      <p>Thirty minutes, no pitch deck. We'll map your stack and identify gaps before any contract is signed.</p>
      <div className="actions">
        <Button size="lg" onClick={onBook}>Book a discovery call <Icon name="arrowRight" size={16} /></Button>
        <Button variant="secondary" size="lg" onNavy href="mailto:info@firestrike.co">Email info@firestrike.co</Button>
      </div>
    </div>
  </section>
);

/* ---------- Footer ---------- */

const Footer = () => (
  <footer className="fs-footer on-navy">
    <div className="fs-shell">
      <div className="top">
        <div className="brand">
          <img src="assets/firestrike-logo-horizontal.png" alt="FireStrike" />
          <p>The integration layer for intelligent security systems. AI &amp; automation consulting for SOC and MSSP teams.</p>
        </div>
        <div>
          <h5>Services</h5>
          <ul>
            <li><a href="/services/security-tool-integration.html">Security tool integration</a></li>
            <li><a href="/services/security-operations-automation.html">Security operations automation</a></li>
            <li><a href="/services/ai-workflow-build.html">AI workflow build</a></li>
            <li><a href="/services/gap-analysis.html">Gap analysis</a></li>
          </ul>
        </div>
        <div>
          <h5>Company</h5>
          <ul>
            <li><a href="/about.html">Who we are</a></li>
            <li><a href="/process.html">How we work</a></li>
          </ul>
        </div>
        <div>
          <h5>Contact</h5>
          <ul>
            <li><a href="mailto:info@firestrike.co">info@firestrike.co</a></li>
            <li><a href="/partners.html">Partner inquiries</a></li>
          </ul>
        </div>
      </div>
      <div className="legal">
        <span>© 2026 FireStrike, Inc.</span>
      </div>
    </div>
  </footer>
);

/* ---------- Book-a-call modal ---------- */

const BookModal = ({ open, onClose }) => {
  const [submitted, setSubmitted] = useState(false);
  useEffect(() => {
    if (!open) { setSubmitted(false); return; }
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    setTimeout(onClose, 1800);
  };

  return (
    <div className={`fs-modal-bg ${open ? 'open' : ''}`} onClick={onClose}>
      <div className="fs-modal" onClick={(e) => e.stopPropagation()}>
        {!submitted ? (
          <>
            <h3>Book a 30-minute discovery call</h3>
            <p>Tell us where to send a calendar link. We'll map your stack and identify gaps before any contract is signed.</p>
            <form onSubmit={submit}>
              <div className="field">
                <label>Work email</label>
                <input type="email" required placeholder="you@company.com" autoFocus />
              </div>
              <div className="field">
                <label>Company</label>
                <input type="text" required placeholder="Acme Inc." />
              </div>
              <div className="row">
                <Button variant="secondary" onClick={onClose} type="button">Cancel</Button>
                <button className="fs-btn primary" type="submit">Send link</button>
              </div>
            </form>
          </>
        ) : (
          <>
            <div className="ok">
              <Icon name="checkCircle" size={22} />
              <div>
                <p className="t">Got it — we'll be in touch.</p>
                <p className="d">Check your inbox within one business day.</p>
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

/* ---------- Page ---------- */

const Page = () => {
  const [open, setOpen] = useState(false);
  const onBook = () => setOpen(true);
  return (
    <>
      <Nav onBook={onBook} />
      <Hero onBook={onBook} />
      <SecurityMarquee />
      <ProblemSection />
      <ServiceCards />
      <ProcessStrip />
      <AssessmentTeaser onBook={onBook} />
      <CTA onBook={onBook} />
      <Footer />
      <BookModal open={open} onClose={() => setOpen(false)} />
    </>
  );
};

/* mount */
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Page />);
