// Hero.jsx
const auditLayers = [
  { label: 'SEO', status: 'Content opportunity', detail: 'Technical structure, internal links, search intent' },
  { label: 'AEO', status: 'Answer engine', detail: 'FAQ, schema, citation-ready answer formats' },
  { label: 'Content', status: 'Production bottleneck', detail: 'Briefs, drafts, review, bilingual workflow' },
  { label: 'Ads', status: 'Message gap', detail: 'Ad message, landing page, follow-up logic' },
  { label: 'CRM', status: 'Follow-up gap', detail: 'Lead scoring, routing, response rhythm' },
];

const AuditConsole = () => (
  <div className="cs-audit-console" aria-label="AI marketing audit interface">
    <div className="cs-audit-console__top">
      <span className="cs-pill cs-pill--orange-solid">
        <span className="cs-pill__dot"></span>AI Audit OS
      </span>
      <span className="cs-mono">14-day diagnostic</span>
    </div>
    <div className="cs-audit-console__score">
      <span>Marketing system readiness</span>
      <strong>Diagnosing</strong>
    </div>
    <div className="cs-audit-console__layers">
      {auditLayers.map((layer, index) => (
        <div className="cs-audit-layer" style={{ '--i': index }} key={layer.label}>
          <div>
            <b>{layer.label}</b>
            <span>{layer.detail}</span>
          </div>
          <em>{layer.status}</em>
        </div>
      ))}
    </div>
    <div className="cs-audit-console__output">
      <span className="cs-mono">output</span>
      <b>Top 3 priority fixes</b>
      <p>Ranked by business impact, implementation difficulty, and 14-day feasibility.</p>
    </div>
  </div>
);

const Hero = () => (
  <section className="cs-hero" id="top">
    <div className="cs-hero__bg" aria-hidden="true"></div>
    <div className="cs-container cs-hero__inner">
      <div className="cs-hero__copy">
        <span className="cs-eyebrow"><span className="cs-eyebrow__dot"></span>AI-first marketing · Hong Kong</span>
        <h1 className="cs-hero__title">
          AI marketing systems that actually <span className="cs-grad-text">ship</span>.
        </h1>
        <p className="cs-hero__lead">
          We rebuild your SEO, AEO, content, and ads as one workflow your team can run.
          Audit in 14 days. No retainers we can't justify.
        </p>
        <div className="cs-hero__ctas">
          <a className="cs-btn cs-btn--primary cs-btn--lg" href="#audit">Book a free AI marketing audit →</a>
          <a className="cs-btn cs-btn--ghost cs-btn--lg" href="#services">Explore services</a>
        </div>
        <ul className="cs-hero__signals">
          <li><span className="cs-check">✓</span> 14-day audit, fixed scope</li>
          <li><span className="cs-check">✓</span> English and Traditional Chinese delivery</li>
          <li><span className="cs-check">✓</span> Workflows your team owns</li>
        </ul>
      </div>
      <div className="cs-hero__art">
        <div className="cs-hero__streaks" aria-hidden="true">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div className="cs-hero__badge cs-hero__badge--small">
          <img src="/assets/cheetah-mark-orange.png" alt="" />
        </div>
        <AuditConsole />
      </div>
    </div>
  </section>
);
window.Hero = Hero;