window.Kit.Home = function Home() {
  const { Button, Card, Badge, Tag, Eyebrow, Stat, Marquee } = window.DS;
  const { Icon, Photo, CountStat, Mask, Brand, brand, data } = window.Kit;
  return (
    <main>
      {/* Hero */}
      <section className="section section--first" style={{ paddingBottom: 'var(--space-16)' }}>
        <div className="container stack" style={{ gap: 'var(--space-8)' }}>
          <div className="reveal"><Eyebrow dot pulse pill>Taking new clients for Q4</Eyebrow></div>
          <h1 className="display-xl">
            <Mask text="Take your business to the" delay={80} />
            <span className="mask"><span className="mark" style={{ animationDelay: '420ms' }}>next level.</span></span>
          </h1>
          <div className="grid grid-2" style={{ alignItems: 'end' }}>
            <p className="lead reveal" data-d="2" style={{ maxWidth: '46ch' }}>Domain, website, content, SEO and analytics — one team, one plan. You run the business. We run everything else.</p>
            <div className="row reveal" data-d="3" style={{ justifyContent: 'flex-end' }}>
              <Button size="xl" arrow href="#/audit">Start a project</Button>
              <Button size="xl" variant="secondary" href="#/services">See what's included</Button>
            </div>
          </div>
          <div className="reveal" data-d="4" style={{ position: 'relative' }}>
            <Photo id="home-hero" ratio="16 / 7" label="Hero — clean studio photo: a business owner at a bright, uncluttered workspace"><img src="./assets/portal-overview.png" alt="The L3V3L client portal: live site pulse, visits, leads, rating and ad wallet" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top', display: 'block' }} /></Photo>
            <div className="chips">
              <div className="chip float" style={{ left: '-2%', bottom: '-6%' }}>
                <Card variant="glass" padding="sm" compact><Stat value="+9.4%" label="Visits · 30 days" size="sm" trend="up" /></Card>
              </div>
              <div className="chip float float--2" style={{ right: '-2%', top: '-8%' }}>
                <Card variant="surface" padding="sm" compact><div className="row" style={{ gap: 8 }}><Badge tone="success" dot>Live</Badge><span className="body-sm" style={{ color: 'var(--text)' }}>evergladelawn.com · 92 days</span></div></Card>
              </div>
              <div className="chip float float--3" style={{ right: '6%', bottom: '-7%' }}>
                <Card variant="accent" padding="sm" compact><div className="row" style={{ gap: 8 }}><Icon name="MapPin" size={16} /><span className="body-sm" style={{ color: 'var(--ink)', fontWeight: 600 }}>#2 for “landscaping cape coral”</span></div></Card>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Proof marquee */}
      <div className="reveal">
        <Marquee divided speed={34} gap={64}>
          {data.clients.map((c) => <span key={c} style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.03em', color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>{c}</span>)}
        </Marquee>
      </div>

      {/* Services */}
      <section className="section">
        <div className="container stack" style={{ gap: 'var(--space-12)' }}>
          <div className="grid grid-2" style={{ alignItems: 'end', gap: 'var(--space-8)' }}>
            <div className="stack reveal"><Eyebrow>Everything, handled</Eyebrow><h2 className="display">One plan. Nine jobs. Zero tabs open.</h2></div>
            <p className="lead reveal" data-d="1">Most businesses juggle eight vendors and a spreadsheet of logins. <Brand /> replaces all of it — and answers one phone number.</p>
          </div>
          <div className="grid grid-3">
            {data.services.map((s, i) => (
              <Card key={s.id} interactive className="reveal" data-d={(i % 3) + 1} onClick={() => { location.hash = '/services'; }}>
                <div className="row between"><div className="service-icon"><Icon name={s.icon} size={22} /></div><Eyebrow tone="muted" number={i + 1}>{s.kicker}</Eyebrow></div>
                <h3 className="h3" style={{ marginTop: 8 }}>{s.title}</h3>
                <p className="body-sm">{brand(s.desc)}</p>
                <span className="link" style={{ marginTop: 'auto' }}>Learn more <span className="arr">→</span></span>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Social — platform showcase */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container grid grid-2" style={{ gap: 'var(--space-16)', alignItems: 'center' }}>
          <div className="stack reveal" style={{ gap: 'var(--space-6)' }}>
            <Eyebrow>Social, on autopilot</Eyebrow>
            <h2 className="display">Written, scheduled, posted, watched.</h2>
            <p className="lead" style={{ maxWidth: '44ch' }}>We draft posts in your voice. You approve in one tap. The <Brand /> platform publishes to every channel, then watches the comments, mentions and numbers so you don't have to.</p>
            <ul className="feature-list">
              {['AI-drafted posts and images in your voice — nothing goes out unapproved', 'Scheduling & publishing to Instagram, Facebook, LinkedIn, X, TikTok and Google', 'One inbox for comments, DMs, reviews and brand mentions', 'Analytics with best-time-to-post, per channel and per post'].map((b) => <li key={b}><Icon name="Check" size={16} strokeWidth={2.5} />{b}</li>)}
            </ul>
            <div className="row"><Button variant="secondary" arrow href="#/services">See the social service</Button></div>
          </div>
          <div className="reveal" data-d="1" style={{ position: 'relative' }}>
            <Card padding="md">
              <div className="row between"><Eyebrow tone="muted">Composer</Eyebrow><Badge tone="accent">AI draft · your voice</Badge></div>
              <div className="row" style={{ gap: 8 }}>
                {data.social.channels.map(([abbr, name], i) => <span key={name} title={name} aria-label={name} style={{ width: 34, height: 34, borderRadius: '50%', display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 700, letterSpacing: '-0.02em', background: i < 3 ? 'var(--accent)' : 'var(--surface-2)', color: i < 3 ? 'var(--ink)' : 'var(--text-subtle)', border: i < 3 ? '1px solid transparent' : '1px solid var(--border)' }}>{abbr}</span>)}
                <span className="caption" style={{ marginLeft: 4 }}>3 of 5 channels</span>
              </div>
              <p className="body" style={{ color: 'var(--text)', fontSize: 17, lineHeight: 1.45 }}>{data.social.draft}</p>
              <div className="row" style={{ gap: 10 }}>
                <Photo id="home-social-media" ratio="1 / 1" radius={12} label="Post image" style={{ width: 88, flex: 'none' }} />
                <div className="stack" style={{ gap: 6 }}><span className="caption" style={{ textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 600 }}>Scheduled</span><span className="body-sm mono" style={{ color: 'var(--text)' }}>{data.social.schedule}</span><span className="caption">#sourdough #bakery · first comment added</span></div>
              </div>
              <div className="row" style={{ paddingTop: 8, borderTop: '1px solid var(--border)', gap: 16 }}>
                <div className="row" style={{ gap: 20, flex: '1 1 320px' }}>
                  {data.social.stats.map(([v, l]) => <Stat key={l} value={v} label={l} size="sm" />)}
                </div>
                <Button size="md" arrow style={{ marginLeft: 'auto' }}>Approve & schedule</Button>
              </div>
            </Card>
            <div className="chip float float--2" style={{ position: 'relative', marginTop: -16, marginLeft: 'auto', marginRight: -16, width: 320, maxWidth: '92%', zIndex: 1 }}>
              <Card variant="inverse" padding="sm" compact>
                <div className="row between"><Eyebrow>Inbox · 3 new</Eyebrow><Badge tone="success" dot>Watching</Badge></div>
                {data.social.inbox.map(([ch, msg, t]) => <div key={msg} className="row between" style={{ gap: 8, flexWrap: 'nowrap' }}><span className="body-sm" style={{ color: 'inherit', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}><span style={{ opacity: 0.6 }}>{ch} · </span>{msg}</span><span className="caption mono" style={{ flex: 'none', color: 'inherit', opacity: 0.6 }}>{t}</span></div>)}
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* Reputation & rankings — platform showcase */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container grid grid-2" style={{ gap: 'var(--space-16)', alignItems: 'center' }}>
          <div className="reveal" style={{ position: 'relative' }}>
            <Card padding="md">
              <div className="row between"><Eyebrow tone="muted">Reviews · Northwind Bakery</Eyebrow><Badge tone="outline">2 locations</Badge></div>
              <div className="row" style={{ gap: 24 }}>
                {data.reputation.funnel.map(([v, l]) => <Stat key={l} value={v} label={l} size="sm" />)}
                <span className="caption" style={{ marginLeft: 'auto' }}>Last 7 days · text + email</span>
              </div>
              <div className="stack" style={{ gap: 10, padding: 16, borderRadius: 'var(--radius-md)', background: 'var(--surface-2)' }}>
                <div className="row between">
                  <div className="row" style={{ gap: 2 }}>{[0, 1, 2, 3, 4].map((i) => <Icon key={i} name="Star" size={14} fill="var(--accent)" stroke="var(--accent-text)" strokeWidth={1.5} />)}</div>
                  <span className="caption">Google · {data.reputation.review.location} · 2h</span>
                </div>
                <p className="body-sm" style={{ color: 'var(--text)' }}>“{data.reputation.review.text}” <span style={{ color: 'var(--text-muted)' }}>— {data.reputation.review.name}</span></p>
                <div className="stack" style={{ gap: 8, paddingTop: 8, borderTop: '1px solid var(--border)' }}>
                  <div className="row between"><Badge tone="accent">Reply drafted · your voice</Badge><span className="caption mono">replies within 24h</span></div>
                  <p className="body-sm">{data.reputation.review.reply}</p>
                  <div className="row"><Button size="sm" arrow>Post reply</Button><Button size="sm" variant="ghost">Edit</Button></div>
                </div>
              </div>
            </Card>
            <div className="chip float float--3" style={{ position: 'relative', marginTop: -16, marginRight: 'auto', marginLeft: -16, width: 340, maxWidth: '92%', zIndex: 1 }}>
              <Card variant="inverse" padding="sm" compact>
                <div className="row between"><Eyebrow>Rankings · Portland</Eyebrow><Badge tone="success" dot>Live</Badge></div>
                {data.reputation.rankings.map(([kw, pos, d]) => (
                  <div key={kw} className="row between" style={{ gap: 8, flexWrap: 'nowrap' }}>
                    <span className="body-sm" style={{ color: 'inherit', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{kw}</span>
                    <span className="row" style={{ gap: 8, flex: 'none' }}><span className="mono" style={{ fontSize: 14, fontWeight: 600 }}>#{pos}</span><span className="caption mono" style={{ color: d >= 0 ? 'var(--accent-text)' : 'var(--danger)' }}>{d >= 0 ? '▲' : '▼'}{Math.abs(d)}</span></span>
                  </div>
                ))}
              </Card>
            </div>
          </div>
          <div className="stack reveal" data-d="1" style={{ gap: 'var(--space-6)' }}>
            <Eyebrow>Reputation & rankings</Eyebrow>
            <h2 className="display">Asked, collected, answered, ranked.</h2>
            <p className="lead" style={{ maxWidth: '44ch' }}>After every job, <Brand /> texts the customer for a review, sends them to the right Google listing, and replies in your voice. Your rankings, reviews, Google listings and Google Ads sit in one dashboard — live, by location.</p>
            <ul className="feature-list">
              {['Review requests by text and email, routed to Google, Yelp or Facebook per location', 'Every review and comment replied to within 24h — unhappy customers reach you privately first', 'Google Business Profile managed like a storefront: posts, photos, hours, Q&A', 'Google Ads built and tuned weekly, spend billed at cost', 'Live keyword and map-pack rankings, by location, with history'].map((b) => <li key={b}><Icon name="Check" size={16} strokeWidth={2.5} />{b}</li>)}
            </ul>
            <div className="row"><Button variant="secondary" arrow href="#/services">See reviews, listings & ads</Button></div>
          </div>
        </div>
      </section>

      {/* How it works — dark band */}
      <section className="section band" data-theme="dark" style={{ background: 'var(--bg)', color: 'var(--text)' }}>
        <div className="container grid grid-2" style={{ gap: 'var(--space-16)', alignItems: 'center' }}>
          <div className="stack" style={{ gap: 'var(--space-8)' }}>
            <div className="stack reveal"><Eyebrow>How it works</Eyebrow><h2 className="display">Three steps. Then it just runs.</h2></div>
            {data.steps.map((st, i) => (
              <div key={st.title} className="reveal" data-d={i + 1} style={{ display: 'grid', gridTemplateColumns: '112px 1fr', gap: 24, paddingTop: 24, borderTop: '1px solid var(--border)' }}>
                <div className="step-num">0{i + 1}</div>
                <div className="stack" style={{ gap: 10 }}>
                  <div className="row between"><h3 className="h3">{st.title}</h3><Badge tone="outline">{st.time}</Badge></div>
                  <p className="body-sm">{st.desc}</p>
                </div>
              </div>
            ))}
            <div className="reveal" data-d="4"><Button variant="secondary" size="lg" arrow href="#/audit">Start with the audit</Button></div>
          </div>
          <div className="reveal" data-d="2"><Photo id="home-steps" ratio="4 / 5" label="Studio photo: the team at work — dark seamless set, soft key light"><img src="./assets/admin-home.png" alt="Inside the L3V3L Command Center: approvals, fleet health and the L3V agent" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'left top', display: 'block' }} /></Photo></div>
        </div>
      </section>

      {/* Results */}
      <section className="section">
        <div className="container stack" style={{ gap: 'var(--space-12)' }}>
          <div className="stack reveal"><Eyebrow>Results</Eyebrow><h2 className="display">Numbers our clients actually see.</h2></div>
          <div className="grid grid-4 reveal" data-d="1" style={{ borderTop: '1px solid var(--border)', paddingTop: 'var(--space-8)' }}>
            {data.stats.slice(0, 4).map((s) => <CountStat key={s.label} value={s.value} label={s.label} note={s.note} trend={s.trend} />)}
          </div>
          <div className="grid grid-2">
            {data.cases.map((c, i) => (
              <Card key={c.client} interactive className="reveal" data-d={i + 1} media={<Photo id={'home-case-' + i} flush label={c.photo} />}>
                <div className="row between"><Eyebrow tone="muted">{c.client}</Eyebrow><Badge tone="accent" mono>{c.delta}</Badge></div>
                <h3 className="h3">{c.title}</h3>
                <div className="row" style={{ gap: 8 }}>{c.tags.map((t) => <Tag key={t} size="sm">{t}</Tag>)}</div>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA — lime band */}
      <section className="section section--tight" style={{ background: 'var(--accent)', color: 'var(--ink)' }}>
        <div className="container grid grid-2" style={{ alignItems: 'center', gap: 'var(--space-8)' }}>
          <div className="stack reveal"><Eyebrow tone="onaccent">Free 20-minute audit</Eyebrow><h2 className="display" style={{ color: 'var(--ink)' }}>Ready for the next level?</h2><p className="body" style={{ color: 'var(--ink)', opacity: 0.8 }}>Subscription, 30-day periods. No commitment, cancel anytime with 30 days’ notice. Download your website anytime, 24/7.</p></div>
          <div className="row reveal" data-d="1" style={{ justifyContent: 'flex-end' }}>
            <Button variant="inverse" size="xl" arrow href="#/audit" style={{ background: 'var(--ink)', color: '#F5F6EE' }}>Book the audit</Button>
            <Button variant="ghost" size="xl" href="#/pricing" style={{ color: 'var(--ink)' }}>See pricing</Button>
          </div>
        </div>
      </section>
    </main>
  );
};