// Sections.jsx — homepage prototype, V2 (credibility badges, example workflow framing)
const TrustStrip = () => {
  const badges = [
    { t: 'Built for HK SMEs', d: 'Hong Kong context, not exported playbooks' },
    { t: 'Bilingual delivery', d: 'Every deliverable ships in English and Traditional Chinese' },
    { t: 'SEO + AEO ready', d: 'Make content easier for Google and AI tools to understand' },
    { t: 'Automation-first', d: 'AI workflows wired into tools you already use' },
  ];
  return (
    <section className="cs-trust">
      <div className="cs-container">
        <div className="cs-trust__row cs-trust__row--badges">
          {badges.map(b => (
            <div key={b.t} className="cs-trust__badge">
              <span className="cs-trust__check" aria-hidden="true">✓</span>
              <div>
                <div className="cs-trust__badge-title">{b.t}</div>
                <div className="cs-trust__badge-desc">{b.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const BrokenSystem = () => {
  const stages = [
    ['Traffic', 'SEO and ads bring people in, but the landing page does not carry the next step.'],
    ['Content', 'Topics, briefs, review, and bilingual versions are scattered across tools.'],
    ['Enquiries', 'Forms, WhatsApp, and email arrive without fast classification.'],
    ['Follow-up', 'High-value leads go cold while low-fit leads consume time.'],
    ['Reporting', 'The data exists, but it does not say what to do next week.'],
  ];

  return (
    <section className="cs-section cs-section--warm">
      <div className="cs-container">
        <span className="cs-eyebrow">The problem is not one channel</span>
        <h2 className="cs-section__title">Your marketing system usually breaks in the middle.</h2>
        <p className="cs-section__lead">AI tools alone do not fix the issue. The real work is turning traffic, content, enquiries, follow-up, and reporting into one repeatable workflow.</p>
        <div className="cs-breakflow" aria-label="Marketing workflow breakpoints">
          {stages.map(([title, copy], index) => (
            <article className="cs-breakflow__stage" style={{ '--i': index }} key={title}>
              <span className="cs-breakflow__num">{String(index + 1).padStart(2, '0')}</span>
              <h3>{title}</h3>
              <p>{copy}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const systemNodes = [
  ['SEO', 'Search structure', 'Technical SEO, internal links, and commercial-intent pages.'],
  ['AEO', 'Answer formats', 'Make content easier for ChatGPT, Perplexity, and Gemini to understand and cite.'],
  ['Content', 'Shipping workflow', 'From topic brief to bilingual draft, review, and publishing.'],
  ['Ads', 'Message match', 'Ads, landing pages, and follow-up use one offer logic.'],
  ['CRM', 'Lead follow-up', 'Classify, score, route, and draft responses for new enquiries.'],
  ['Analytics', 'Next action', 'A weekly 1-page brief that keeps only decision-driving data.'],
];

const Solution = () => (
  <section className="cs-section cs-section--dark">
    <div className="cs-container cs-solution">
      <div className="cs-solution__copy">
        <span className="cs-eyebrow cs-eyebrow--on-dark">AI-first, not AI-decorated</span>
        <h2 className="cs-solution__title">One workflow connecting 6 marketing breakpoints.</h2>
        <p className="cs-solution__lead">
          We don't sell tools. We wire SEO, AEO, content, ads, CRM, and reporting into a single workflow
          your marketing lead actually owns — with AI as the engine, not the bottleneck.
        </p>
        <ul className="cs-solution__list">
          <li><b>Audit</b> · 14 days · fixed scope</li>
          <li><b>Prioritize</b> · rank by impact, difficulty, and time</li>
          <li><b>Build</b> · fix the most important workflow first</li>
        </ul>
      </div>
      <div className="cs-solution__diagram" role="img" aria-label="AI workflow connecting SEO, AEO, content, ads, CRM, and analytics">
        <svg className="cs-system-map" viewBox="0 0 460 460" aria-hidden="true">
          <defs>
            <radialGradient id="cs-map-glow-en" cx="50%" cy="50%" r="60%">
              <stop offset="0%" stopColor="#F97316" stopOpacity="0.32" />
              <stop offset="58%" stopColor="#F97316" stopOpacity="0.08" />
              <stop offset="100%" stopColor="#F97316" stopOpacity="0" />
            </radialGradient>
            <linearGradient id="cs-map-line-en" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="#FED7AA" stopOpacity="0.12" />
              <stop offset="50%" stopColor="#F97316" stopOpacity="0.72" />
              <stop offset="100%" stopColor="#FED7AA" stopOpacity="0.12" />
            </linearGradient>
          </defs>
          <circle className="cs-system-map__glow" cx="230" cy="230" r="170" fill="url(#cs-map-glow-en)" />
          <circle className="cs-system-map__ring cs-system-map__ring--outer" cx="230" cy="230" r="174" />
          <circle className="cs-system-map__ring cs-system-map__ring--inner" cx="230" cy="230" r="104" />
          {[
            ['M230 230 L118 58'],
            ['M230 230 L348 58'],
            ['M230 230 L48 230'],
            ['M230 230 L410 230'],
            ['M230 230 L132 392'],
            ['M230 230 L348 392']
          ].map((d,i)=>(
            <path key={i} className={`cs-system-map__path cs-system-map__path--${i + 1}`} d={d} pathLength="1" />
          ))}
        </svg>
        <div className="cs-node cs-node--center"><img src="/assets/cheetah-mark-orange.png" alt=""/><b>AI workflow</b></div>
        {['SEO','AEO','Content','Ads','CRM','Analytics'].map((n,i)=>(
          <div key={n} className={`cs-node cs-node--n${i+1}`}><span>{n}</span></div>
        ))}
      </div>
      <div className="cs-system-explain">
        {systemNodes.map(([node, title, copy]) => (
          <article key={node}>
            <span>{node}</span>
            <h3>{title}</h3>
            <p>{copy}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const AuditDeliverables = () => {
  const deliverables = [
    ['1-page audit summary', 'The top 3 issues, business impact, and recommended sequence.'],
    ['90-day roadmap', 'What to do each week, who owns it, and what can wait.'],
    ['AI workflow map', 'How SEO, AEO, content, ads, CRM, and reporting connect.'],
    ['Opportunity list', 'Content topics, AEO answer shapes, and automation quick wins.'],
  ];

  return (
    <section className="cs-section" id="services">
      <div className="cs-container">
        <div className="cs-section__head">
          <div>
            <span className="cs-eyebrow">Audit deliverables</span>
            <h2 className="cs-section__title">After the free audit, you do not just get a sales pitch.</h2>
          </div>
          <a className="cs-btn cs-btn--ghost" href="/en-hk/services/">View full services →</a>
        </div>
        <div className="cs-deliverables">
          {deliverables.map(([title, copy], index) => (
            <article className="cs-deliverable" key={title}>
              <span className="cs-deliverable__file">0{index + 1}.md</span>
              <h3>{title}</h3>
              <p>{copy}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const HowItWorks = () => {
  const steps = [
    { n:'01', t:'Audit', d:'In 14 days, we inspect SEO, AEO, content, ads, CRM, and reporting to find the biggest breakpoints.' },
    { n:'02', t:'Prioritize', d:'We rank issues by business impact, implementation difficulty, and timing, then turn them into a 90-day roadmap.' },
    { n:'03', t:'Build system', d:'After direction is confirmed, we build the most important workflow first, then expand into content, ads, and reporting.' },
  ];
  return (
    <section className="cs-section cs-section--warm" id="how">
      <div className="cs-container">
        <span className="cs-eyebrow">How it works</span>
        <h2 className="cs-section__title">From signed audit to first lift in 6 weeks.</h2>
        <ol className="cs-steps cs-steps--three">
          {steps.map((s,i)=>(
            <li key={s.n} className={`cs-step ${i===0 ? 'is-active':''}`}>
              <span className="cs-step__num">{s.n}</span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
};

const Workflows = () => (
  <section className="cs-section" id="work">
    <div className="cs-container">
      <div className="cs-section__head">
        <div>
          <span className="cs-eyebrow">Example AI marketing workflow</span>
          <h2 className="cs-section__title">What it looks like in practice.</h2>
          <p className="cs-section__lead cs-workflow__disclaimer">Illustrative scenarios — not actual client results. Real case studies coming soon.</p>
        </div>
      </div>
      <div className="cs-workflows">
        <article className="cs-card cs-workflow">
          <div className="cs-workflow__head"><span className="cs-pill cs-pill--warm">Lead engine</span><span className="cs-mono">Example workflow</span></div>
          <h3>Website enquiry → qualified call in 24h</h3>
          <p className="cs-workflow__scenario">A Hong Kong service business receives a website enquiry. AI qualifies the lead, the CRM tags it by service interest, a personalised follow-up draft sits in the founder's inbox, and the weekly summary lands on Monday.</p>
          <ol className="cs-workflow__steps">
            <li>Form submit enriched with company data</li>
            <li>AI scores fit + drafts a personalised reply</li>
            <li>CRM tags lead by service interest</li>
            <li>Founder reviews, sends, books call</li>
            <li>Weekly: cost-per-qualified-lead summary</li>
          </ol>
        </article>
        <article className="cs-card cs-workflow">
          <div className="cs-workflow__head"><span className="cs-pill cs-pill--warm">Content engine</span><span className="cs-mono">Example workflow</span></div>
          <h3>Bilingual blog: brief → publish in 48h</h3>
          <p className="cs-workflow__scenario">An SEO/AEO gap report flags a topic Hong Kong founders are searching for. AI drafts in English and Traditional Chinese, the marketing lead edits inline, schema and internal links are wired automatically, and citations are tracked weekly.</p>
          <ol className="cs-workflow__steps">
            <li>Topic brief from SEO/AEO gap report</li>
            <li>Draft English + Traditional Chinese in brand voice</li>
            <li>Marketing lead reviews, edits inline</li>
            <li>Auto-publish + internal links + schema</li>
            <li>Weekly: monitor citations, refresh top-3</li>
          </ol>
        </article>
      </div>
    </div>
  </section>
);

const TrustWithoutHype = () => (
  <section className="cs-section cs-section--warm">
    <div className="cs-container cs-why">
      <div>
        <span className="cs-eyebrow">Trust without hype</span>
        <h2 className="cs-section__title">We do not use AI hype as a substitute for business judgment.</h2>
      </div>
      <div className="cs-why__grid">
        {[
          ['No ranking guarantees', 'SEO and AEO can improve the chance of being understood and cited, but rankings and AI citations should not be guaranteed.'],
          ['No forced tool migration', 'We prioritize the CRM, ad platforms, website, and reporting tools you already use.'],
          ['No fake case studies', 'Until public cases are ready, we show sample workflows, sample audit output, and methodology.'],
          ['No black box', 'Workflows live in your tools, with clear logic, owners, and next actions written into the deliverables.'],
        ].map(([t,d])=>(
          <div key={t} className="cs-why__item">
            <div className="cs-why__check">✓</div>
            <h3>{t}</h3>
            <p>{d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Insights = () => (
  <section className="cs-section" id="insights">
    <div className="cs-container">
      <div className="cs-section__head">
        <div>
          <span className="cs-eyebrow">Insights</span>
          <h2 className="cs-section__title">Field notes from the audit.</h2>
        </div>
        <a className="cs-btn cs-btn--ghost" href="/en-hk/insights/">All posts →</a>
      </div>
      <div className="cs-insights">
        {[
          ['AEO', 'How to get cited by ChatGPT in 2026', '8 min · Apr 24'],
          ['SEO', 'Schema patterns that still move rankings', '6 min · Apr 18'],
          ['Workflows', 'The 4-role content engine that ships weekly', '11 min · Apr 11'],
        ].map(([tag,title,meta],i)=>(
          <a key={i} className="cs-card cs-insight" href="/en-hk/insights/">
            <div className="cs-insight__cover" data-i={i}></div>
            <div className="cs-insight__body">
              <span className="cs-pill cs-pill--orange">{tag}</span>
              <h3>{title}</h3>
              <span className="cs-mono cs-insight__meta">{meta}</span>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const FAQ = () => {
  const items = [
    ['What\'s included in the free AI marketing audit?',
      'A 30-minute call, an async review of your SEO + AEO + ads + analytics, and a written 1-page summary with the top 3 fixes ranked by ROI. No deck theatre.'],
    ['Do you work in Traditional Chinese?',
      'Yes. Every deliverable ships in English and Traditional Chinese by default, written by senior bilingual editors, not translated after the fact.'],
    ['How is "AEO" different from SEO?',
      'AEO (Answer Engine Optimization) is structuring content so ChatGPT, Perplexity, and Gemini cite it. It overlaps with SEO but uses different schema, length, and answer-shape patterns.'],
    ['Do we need to switch tools?',
      'Almost never. We wire workflows into what you already use — HubSpot, Notion, Google Ads, Meta, Webflow, etc.'],
    ['What does engagement look like after the audit?',
      'A 4–8 week build, then a monthly run-rate. No 12-month retainers; cancel any month if we\'re not earning the fee.'],
  ];
  return (
    <section className="cs-section cs-section--warm" id="faq">
      <div className="cs-container cs-faq">
        <div>
          <span className="cs-eyebrow">FAQ</span>
          <h2 className="cs-section__title">Common questions.</h2>
          <p className="cs-section__lead">If yours isn't here, ask in the audit form — we usually answer same day.</p>
        </div>
        <div className="cs-faq__list">
          {items.map(([q,a],i)=>(
            <details key={i} className="cs-faq__item" open={i===0}>
              <summary>{q}<span className="cs-faq__plus">+</span></summary>
              <p>{a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
};

const FinalCTA = () => (
  <section className="cs-section cs-final" id="audit">
    <div className="cs-container cs-final__inner">
      <div className="cs-final__bg" aria-hidden></div>
      <span className="cs-eyebrow cs-eyebrow--on-dark">14-day audit · fixed scope</span>
      <h2 className="cs-final__title">Book a free AI marketing audit.</h2>
      <p className="cs-final__lead">A 30-minute call, an async deep-dive, and a 1-page plan with the top 3 fixes ranked by ROI. No deck theatre.</p>
      <div className="cs-final__form" id="audit-form-slot" data-ghl-embed aria-label="Book a free AI marketing audit">
        {/* GHL_FORM_EMBED:START */}
        <a className="cs-btn cs-btn--primary cs-btn--lg" href="mailto:support@cheetahsolutions.com.hk?subject=Book a free AI marketing audit" data-ghl-fallback>Book a free audit →</a>
        {/* GHL_FORM_EMBED:END */}
      </div>
      <div className="cs-final__signals">
        <span>✓ Same-day reply</span>
        <span>✓ English + Traditional Chinese</span>
        <span>✓ No retainer pressure</span>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="cs-footer">
    <div className="cs-container cs-footer__grid">
      <div className="cs-footer__brand">
        <a className="footer-brand" href="#top" aria-label="Cheetah Solutions Co. homepage">
          <img src="/assets/cheetah-lockup-stacked.png" alt="" />
          <span>
            <strong>Cheetah Solutions Co.</strong>
            <small>Cheetah Solutions Co.</small>
          </span>
        </a>
        <p>AI-first marketing for Hong Kong businesses. Audit-led, workflow-built, bilingual by default.</p>
      </div>
      <div>
        <h4>Services</h4>
        <ul><li><a href="services/ai-marketing-strategy/index.html">AI Marketing Strategy</a></li><li><a href="services/seo-aeo/index.html">SEO &amp; AEO</a></li><li><a href="services/marketing-automation/index.html">Marketing Automation</a></li><li><a href="services/ai-content-system/index.html">AI Content Systems</a></li><li><a href="services/paid-ads-optimization/index.html">Paid Ads</a></li><li><a href="services/analytics-reporting/index.html">Analytics</a></li></ul>
      </div>
      <div>
        <h4>Company</h4>
        <ul><li><a href="/en-hk/about/">About</a></li><li><a href="/en-hk/cases/">Case studies</a></li><li><a href="/en-hk/insights/">Insights</a></li><li><a href="/en-hk/careers/">Careers</a></li><li><a href="/en-hk/contact/">Contact</a></li></ul>
      </div>
      <div>
        <h4>Hung Hom · Hong Kong</h4>
        <ul><li><a href="mailto:support@cheetahsolutions.com.hk">support@cheetahsolutions.com.hk</a></li><li>+852 92900393</li><li className="footer-address">FLAT/RM B 3/F<br />YUN TAT COMMERCIAL BUILDING<br />70-74 WUHU STREET<br />HUNG HOM K L</li></ul>
      </div>
    </div>
    <div className="cs-container cs-footer__legal">
      <span>© 2026 Cheetah Solutions Co.</span>
      <span><a href="/en-hk/privacy/">Privacy</a> · <a href="/en-hk/terms/">Terms</a></span>
    </div>
  </footer>
);

Object.assign(window, { TrustStrip, BrokenSystem, Solution, AuditDeliverables, HowItWorks, Workflows, TrustWithoutHype, Insights, FAQ, FinalCTA, Footer });