const { Button, IconButton, Badge, Card, ProductCard, StatCard, DataTable } = window.ZaviFxDesignSystem_f15c31;

const Arrow = (p) => <svg width={p.size||16} height={p.size||16} viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8h9M8.5 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>;
const UpRight = (p) => <svg width={p.size||18} height={p.size||18} viewBox="0 0 18 18" fill="none" aria-hidden="true"><path d="M5.5 12.5 12.5 5.5M6.5 5.5h6v6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>;

function HomePage({ go }) {
  const featured = PROJECTS.slice(0, 4);
  useReveal();
  return (
    <>
      <HeroCinematic go={go} />

      <LogoCloud />

      <Section eyebrow="Services" title="What we do, and what you get" intro="Twelve disciplines, briefed once and coordinated by a single strategist. Each engagement reports against one primary metric." pad="var(--space-section)">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(260px,1fr))', gap: 'var(--space-lg)', marginBottom: 'var(--space-xl)' }} data-reveal>
          <ProductCard accent="brand" eyebrow="Flagship" title="Growth Retainer" description="Paid, organic and lifecycle marketing run as one measured system with a single revenue dashboard." meta="Retainer · 12-week cycles" badge={<Badge variant="onColor">Most requested</Badge>} action={<IconButton icon={<UpRight />} label="Explore the growth retainer" variant="onColor" onClick={() => go('services')} />} />
          <ProductCard accent="blue" eyebrow="Web" title="Website Build" description="WordPress and WooCommerce builds engineered for Core Web Vitals, search and conversion." meta="Project · 6–10 weeks" action={<IconButton icon={<UpRight />} label="Explore website builds" variant="onColor" onClick={() => go('services')} />} />
          <ProductCard accent="magenta" eyebrow="Content" title="Content & Social" description="Editorial, social and video content planned around search demand and sales objections." meta="Retainer · monthly" action={<IconButton icon={<UpRight />} label="Explore content and social" variant="onColor" onClick={() => go('services')} />} />
          <ProductCard accent="purple" eyebrow="Brand" title="Brand & Identity" description="Identity systems, collateral and design languages that stay consistent from ad unit to product." meta="Sprint · 4 weeks" action={<IconButton icon={<UpRight />} label="Explore brand and identity" variant="onColor" onClick={() => go('services')} />} />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 'var(--space-md)' }}>
          {SERVICES.slice(0, 4).map((s) => (
            <Card key={s.slug} interactive eyebrow={s.caps[0]} title={s.title}
              footer={<Button variant="text" size="sm" iconRight={<Arrow />} onClick={() => go('services')}>Service details</Button>}>{s.body}</Card>
          ))}
        </div>
      </Section>

      <ProjectShowcase go={go} />
      <ShowcaseHost />

      <Section eyebrow="SEO case study" title="Search growth, shown with the actual reports" intro="The panels below are exports from the SEO tools we work in. Only figures visible in those exports are quoted anywhere on this site." pad="var(--space-section)">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 'var(--space-lg)', alignItems: 'start' }}>
          <BrowserFrame src={ASSETS + 'case-studies/seo-story-2.jpg'} alt="Ahrefs and Semrush exports showing referring-domain and traffic growth" tall />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
            <Card variant="doc" eyebrow="What the reports show" title="Referring domains and organic traffic rising together">
              Backlink acquisition and on-page work were sequenced so authority and relevance grew at the same time.
            </Card>
            <Card variant="doc" eyebrow="Method" title="Relevant, authoritative, sustainable links">
              We qualify every placement on topical relevance and editorial standards. No PBNs, no bulk directories, no guarantees of position.
            </Card>
            <Button onClick={() => go('case-study')} iconRight={<Arrow />}>Read the full SEO case study</Button>
          </div>
        </div>
      </Section>

      <WhyZavi go={go} />

      <StatsBoard />

      <Testimonials />

      <TeamSection />

      <PlatformOrbit go={go} />

      <Section eyebrow="Insights" title="Recent thinking" pad="var(--space-section)">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(260px,1fr))', gap: 'var(--space-md)' }}>
          {window.POSTS.slice(0, 3).map((p) => (
            <PostCard key={p.slug} post={p} open={(s) => { location.hash = 'insights/' + s; }} />
          ))}
        </div>
      </Section>

      <ProcessGrid go={go} />

      <CTAFinale go={go} />
    </>
  );
}
Object.assign(window, { HomePage, Arrow, UpRight });