import Image from 'next/image';
import Link from 'next/link';
import { Brand } from '@/components/marketing/brand';
import { Icon, type IconName } from '@/components/marketing/icons';
import { VideoButton } from '@/components/marketing/video-button';

export async function generateMetadata() {
  const origin = process.env.APP_URL ?? 'http://localhost:3000';
  return { title: 'CHIMBO — Pata. Ongeza. Uza.', alternates: { canonical: origin }, description: 'CHIMBO ni jukwaa la biashara kwa madalali na wauzaji Tanzania. Pata bidhaa, ongeza thamani, uza kwa urahisi.', openGraph: { title: 'CHIMBO — Pata. Ongeza. Uza.', description: 'Biashara yako, kwa ufanisi zaidi.', url: origin, siteName: 'CHIMBO', type: 'website' }, twitter: { card: 'summary' as const, title: 'CHIMBO — Pata. Ongeza. Uza.' } };
}
const steps: { icon: IconName; title: string; text: string }[] = [
  { icon: 'user', title: '1. Jisajili', text: 'Unda akaunti yako\nkama dalali.' },
  { icon: 'box', title: '2. Ongeza bidhaa', text: 'Weka bidhaa zako\nna bei.' },
  { icon: 'send', title: '3. Tuma ofa', text: 'Tengeneza ofa maalum\nna ishiriki kwa wateja.' },
  { icon: 'chart', title: '4. Anza kuuza', text: 'Fuatilia oda, wateja\nna faida.' },
];
function CheckList({ items }: { items: string[] }) { return <ul className="feature-checks">{items.map(item => <li key={item}><span><Icon name="check" /></span>{item}</li>)}</ul>; }
export default function Home() {
  return <main id="main" className="landing" lang="sw">
    <section className="landing-hero" aria-labelledby="hero-title">
      <div className="hero-image"><Image src="/images/landing-hero.png" alt="Mfano wa CHIMBO kwenye simu na duka la bidhaa mtandaoni" fill sizes="100vw" preload quality={85} /></div>
      <div className="landing-container hero-inner"><div className="hero-copy"><p className="hero-eyebrow"><span />SMART SELLING PLATFORM</p><h1 id="hero-title">Pata. <em>Ongeza.</em> Uza.</h1><p className="hero-description">CHIMBO ni platform ya kisasa kwa madalali na wauzaji wa bidhaa. Simamia bidhaa zako, wateja, ofa, oda na faida — yote kwenye sehemu moja.</p><div className="hero-actions"><Link href="/register" className="landing-button">Create Your Store <Icon name="arrow" /></Link><VideoButton /></div><div className="hero-assurances"><span><Icon name="users" />Rahisi kutumia</span><span><Icon name="shield" />Haina usajili kwa wateja</span><span><Icon name="check" />Inafanya biashara yako kuwa smart</span></div></div></div>
      <p className="hero-image-caption">Muonekano wa mfano</p>
    </section>
    <section className="trust-strip" aria-label="CHIMBO kwa biashara yako"><div className="landing-container"><h2>Imeundwa kwa madalali na biashara Tanzania</h2><div className="trust-grid">{([['users', 'Kwa madalali', 'Biashara yako, kidijitali'], ['box', 'Bidhaa zako', 'Kwenye sehemu moja'], ['heart', 'Kwa wateja', 'Bila kulazimika kujisajili'], ['pin', 'Tanzania', 'Biashara bila mipaka']] as [IconName, string, string][]).map(([icon, title, text]) => <div className="trust-item" key={title}><span className="icon-bubble"><Icon name={icon} /></span><div><strong>{title}</strong><p>{text}</p></div></div>)}</div></div></section>
    <section id="how-it-works" className="how-section landing-container"><div className="section-heading"><p className="section-eyebrow">JINSI INAVYOFANYA KAZI</p><h2>Kuanzia usajili hadi mauzo — ni rahisi</h2><p>CHIMBO imeundwa kurahisisha biashara yako.</p></div><ol className="steps-grid">{steps.map(({ icon, title, text }) => <li key={title}><span className="step-icon"><Icon name={icon} /></span><h3>{title}</h3><p>{text}</p><span className="step-arrow"><Icon name="arrow" /></span></li>)}</ol></section>
    <section id="features" className="audience-section" aria-label="Kwa madalali na wateja"><article className="audience-card broker-card"><Image src="/images/landing-broker.png" alt="Dalali akitumia simu katika duka lake" fill sizes="(max-width: 760px) 100vw, 50vw" quality={85}/><div className="audience-copy"><p className="section-eyebrow">KWA MADALALI</p><h2>Biashara yako,<br/>kwa ufanisi zaidi</h2><CheckList items={['Simamia bidhaa, wauzaji na wateja', 'Tengeneza ofa kwa urahisi', 'Fuatilia oda na faida', 'Pata URL yako ya kipekee', 'Fanya biashara popote, wakati wowote']} /><Link href="/register" className="landing-button">Create Your Store <Icon name="arrow" /></Link></div><div className="feature-note"><Icon name="chart"/><span>Hatua ndogo.<br/><strong>Fursa kubwa.</strong></span></div></article>
      <article className="audience-card customer-card"><Image src="/images/landing-customer.png" alt="Mteja akifurahia kutafuta bidhaa kwenye simu" fill sizes="(max-width: 760px) 100vw, 50vw" quality={85}/><div className="audience-copy"><p className="section-eyebrow">KWA WATEJA</p><h2>Pata bidhaa<br/>unazotaka kwa urahisi</h2><CheckList items={['Huna haja ya kujisajili', 'Tazama bidhaa zote za dalali', 'Linganisha bidhaa', 'Wasiliana moja kwa moja na dalali', 'Nunua kwa urahisi']} /><a href="#how-it-works" className="landing-button outline">Jinsi ya kuanza <Icon name="arrow" /></a></div><div className="feature-note"><Icon name="heart"/><span>Bidhaa unazopenda.<br/><strong>Karibu na wewe.</strong></span></div></article>
    </section>
    <section id="about" className="app-section landing-container"><div className="app-preview" aria-hidden="true"><div className="mini-phone"><span className="phone-speaker"/><span className="mini-logo">C</span><strong>CHIMBO</strong><small>Pata. Ongeza. Uza.</small><span className="phone-wave"/></div><div className="mini-phone second"><span className="phone-speaker"/><Icon name="box"/><strong>Duka lako.</strong><span>Kila mahali.</span><div className="mini-grid">{['box', 'heart', 'send', 'chart'].map(icon => <span key={icon}><Icon name={icon as IconName}/></span>)}</div><small>CHIMBO</small></div></div><div className="app-copy"><h2>CHIMBO, popote ulipo</h2><p>Pata uzoefu bora kwenye simu yako.</p><div className="app-badges"><span><Icon name="phone"/><span>KWENYE BROWSER YAKO<strong>Mobile ready</strong></span></span><span><Icon name="devices"/><span>BILA KUPAKUA APP<strong>Fungua. Anza.</strong></span></span></div></div><div className="app-benefits">{([['bolt', 'Fast'], ['shield', 'Secure'], ['devices', 'All Devices']] as [IconName, string][]).map(([icon, text]) => <div key={text}><span><Icon name={icon}/></span><p>{text}</p></div>)}</div></section>
    <section className="closing-cta"><div className="landing-container"><Brand light/><div><h2>Biashara kubwa huanza na hatua ndogo.</h2><p>Jiunge na CHIMBO leo na upeleke biashara yako hatua zaidi.</p></div><Link href="/register" className="landing-button">Get Started <Icon name="arrow"/></Link></div></section>
    <section className="landing-container details-section" aria-label="Maelezo zaidi"><details id="pricing"><summary>Pricing · Gharama za CHIMBO</summary><p>Mipango na bei za usajili zitatangazwa kabla ya uzinduzi wa huduma kamili. Kwa sasa CHIMBO inaendelea kujengwa; hakuna malipo yanayokusanywa hapa.</p></details><details id="faq"><summary>FAQ · Maswali yanayoulizwa mara kwa mara</summary><div><h3>Je, mteja anahitaji akaunti?</h3><p>Hapana. Wateja wataweza kutazama bidhaa na kuwasiliana na dalali bila kujisajili.</p><h3>Je, huduma zote tayari zinapatikana?</h3><p>Bado. Usajili na usanidi wa biashara ni hatua ya kwanza. Katalogi, ofa, oda na ripoti zinaendelea kutengenezwa.</p><h3>Ninaweza kutumia simu?</h3><p>Ndiyo. CHIMBO imeundwa kutumika kwenye simu, tablet na kompyuta kupitia browser.</p></div></details></section>
    <footer className="landing-footer landing-container"><nav aria-label="Footer navigation"><a href="#about">About</a><a href="#features">Features</a><a href="#pricing">Pricing</a><a href="#faq">FAQ</a></nav><p className="footer-motto">Pata. <span>Ongeza.</span> Uza.</p><p>© {new Date().getFullYear()} CHIMBO. All rights reserved.<br/><span>Made for a smarter Tanzania 🇹🇿</span></p></footer>
  </main>;
}