/* v2 — Marketing service page, light SaaS theme */

function MarketingHero() {
  return (
    <section id="top" className="relative pt-16 sm:pt-24 pb-24 overflow-hidden">
      <div className="max-w-7xl mx-auto px-5 sm:px-8 grid lg:grid-cols-12 gap-10 items-center">
        <div className="lg:col-span-7">
          <Reveal variant="up">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[12px] font-medium text-[color:var(--ink-700)]" style={{ background: 'var(--brand-soft)', border: '1px solid var(--brand-200)' }}>
              <span className="inline-flex items-center justify-center w-4 h-4 rounded-full" style={{ background: 'var(--wa)' }}>
                <Ax.WhatsApp className="w-2.5 h-2.5 text-white" strokeWidth={2.5}/>
              </span>
              <span>Marketing · Meta · WhatsApp</span>
            </div>
          </Reveal>
          <Reveal variant="up" delay={80}>
            <h1 className="mt-5 text-[40px] sm:text-[52px] lg:text-[64px] font-semibold tracking-[-0.02em] leading-[1.02] text-balance text-[color:var(--ink)]">
              Customers find you on<br className="hidden sm:block"/>
              <span className="shiny-text">Instagram</span> & <span className="shiny-text">Facebook</span>.
            </h1>
          </Reveal>
          <Reveal variant="up" delay={160}>
            <p className="mt-6 text-[17px] sm:text-[18px] text-[color:var(--ink-700)] leading-[1.55] max-w-[560px] text-pretty">
              Paid ads, social content, and WhatsApp chatbots — all managed end-to-end. We bring people to your shop, and the chatbot takes their order while you're busy serving the queue.
            </p>
          </Reveal>
          <Reveal variant="up" delay={240}>
            <div className="mt-8 flex flex-wrap items-center gap-3">
              <a href="#demo" className="btn-primary inline-flex items-center justify-center gap-1.5 rounded-full text-[15px] font-semibold px-5 py-3">
                Book a consultation
                <Ax.ArrowRight className="w-4 h-4" />
              </a>
              <a href="#pricing" className="btn-ghost inline-flex items-center justify-center gap-1.5 rounded-full text-[15px] font-semibold px-5 py-3">
                See pricing
              </a>
            </div>
          </Reveal>
        </div>

        <Reveal variant="scale" delay={180} className="lg:col-span-5">
          <MarketingHeroMock />
        </Reveal>
      </div>
    </section>
  );
}

function MarketingHeroMock() {
  const videoRef = React.useRef(null);
  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = true; v.defaultMuted = true; v.volume = 0;
    const tryPlay = () => { const p = v.play(); if (p && p.catch) p.catch(() => {}); };
    tryPlay();
    v.addEventListener('canplay', tryPlay);
    return () => v.removeEventListener('canplay', tryPlay);
  }, []);

  return (
    <div className="relative w-full max-w-[300px] mx-auto">
      <div className="rounded-[36px] p-3 shadow-lg" style={{ background: 'linear-gradient(180deg, #1c1917, #0c0a09)' }}>
        <div className="rounded-[26px] overflow-hidden bg-black aspect-[9/16] relative">
          <video ref={videoRef} src="/media/marketing-story.mp4" autoPlay loop muted playsInline disableRemotePlayback preload="metadata" aria-hidden="true" className="absolute inset-0 w-full h-full object-cover" />
        </div>
      </div>
      <div className="hidden sm:flex absolute -left-6 bottom-10 card-plain p-3 flex-col gap-1 w-[170px]">
        <div className="text-[10px] uppercase tracking-wider text-[color:var(--ink-500)] font-semibold">Reach · 7 days</div>
        <div className="font-mono text-[22px] font-semibold text-[color:var(--ink)]">14,820</div>
        <div className="text-[10px] text-emerald-600 font-medium">↑ 38% vs last week</div>
      </div>
    </div>
  );
}

function MarketingServices() {
  const services = [
    { icon: '📣', title: 'Paid ads', body: 'Facebook + Instagram ad campaigns. Audience targeting, creative production, daily monitoring, weekly optimisation.' },
    { icon: '🎬', title: 'Content production', body: 'Short reels, carousel posts, captions, story templates — designed for your shop, posted on a regular schedule.' },
    { icon: '💬', title: 'WhatsApp chatbots', body: 'Automated chatbots for ordering, FAQs, customer support. Same tech that powers AxiomPOS — works on your existing WhatsApp number.', featured: true, badge: 'Popular' },
    { icon: '📊', title: 'Monthly reporting', body: 'Plain-English monthly reports — what worked, what didn\'t, what we\'re changing. No vanity metrics, no jargon.' },
  ];
  return (
    <section id="features" className="py-24 sm:py-32" style={{ background: 'var(--bg-alt)' }}>
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <Reveal variant="up" className="max-w-2xl">
          <div className="text-[12px] font-semibold uppercase tracking-widest" style={{ color: 'var(--brand)' }}>What we do</div>
          <h2 className="mt-3 text-[32px] sm:text-[44px] font-semibold tracking-[-0.02em] leading-[1.05] text-balance text-[color:var(--ink)]">
            Four services. <br className="hidden sm:block"/>One marketing team.
          </h2>
          <p className="mt-5 text-[16px] sm:text-[17px] text-[color:var(--ink-700)] leading-relaxed max-w-xl">
            You don't need to hire an agency, a designer, a copywriter, and a WhatsApp developer. You need us.
          </p>
        </Reveal>

        <div className="mt-12 grid sm:grid-cols-2 gap-5 items-stretch">
          {services.map((s, i) => (
            <Reveal key={s.title} variant="up" delay={(i % 2) * 100} className="h-full">
              <div className={"relative p-6 sm:p-7 h-full card-hover " + (s.featured ? "card-dark" : "card")}>
                {s.badge && (
                  <span className="absolute top-5 right-5 inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wider text-white" style={{ background: 'var(--brand)' }}>
                    {s.badge}
                  </span>
                )}
                <div className="w-12 h-12 rounded-xl flex items-center justify-center text-2xl" style={{ background: 'var(--brand-soft)', border: '1px solid var(--brand-200)' }}>
                  {s.icon}
                </div>
                <h3 className="mt-5 text-[20px] font-semibold tracking-tight text-[color:var(--ink)]">{s.title}</h3>
                <p className="mt-2 text-[14px] leading-relaxed text-[color:var(--ink-700)]">{s.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function MarketingHow() {
  const steps = [
    { n: '01', title: 'Discovery call', body: 'A 30-minute call — your shop, your customers, your goals. We figure out the right campaign mix.', meta: 'Week 1' },
    { n: '02', title: 'Launch',         body: 'First ads + content go live within 7 days. WhatsApp chatbot configured to your menu and tone.', meta: 'Week 2' },
    { n: '03', title: 'Optimise',       body: 'Weekly tweaks to ads, fresh content, monthly written reports. Always reachable on WhatsApp.', meta: 'Ongoing' },
  ];
  return (
    <section id="how" className="py-24 sm:py-32">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <Reveal variant="up" className="max-w-2xl">
          <div className="text-[12px] font-semibold uppercase tracking-widest" style={{ color: 'var(--brand)' }}>How we work</div>
          <h2 className="mt-3 text-[32px] sm:text-[44px] font-semibold tracking-[-0.02em] leading-[1.05] text-[color:var(--ink)]">
            From call to live ads in <br className="hidden sm:block"/>under two weeks.
          </h2>
        </Reveal>

        <div className="mt-12 grid md:grid-cols-3 gap-5 relative">
          {steps.map((s, i) => (
            <Reveal key={s.n} variant="up" delay={i * 120} className="relative card p-7 card-hover">
              <div className="flex items-center gap-3">
                <span className="inline-flex items-center justify-center w-9 h-9 rounded-full text-white text-[13px] font-semibold font-mono" style={{ background: 'var(--brand)' }}>{s.n}</span>
                <span className="text-[11px] font-semibold uppercase tracking-wider text-[color:var(--ink-500)]">{s.meta}</span>
              </div>
              <h3 className="mt-5 text-[20px] font-semibold tracking-tight leading-snug text-[color:var(--ink)]">{s.title}</h3>
              <p className="mt-2 text-[14px] text-[color:var(--ink-700)] leading-relaxed">{s.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function MarketingPricing() {
  return (
    <section id="pricing" className="py-24 sm:py-32" style={{ background: 'var(--bg-alt)' }}>
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <Reveal variant="up" className="text-center max-w-2xl mx-auto">
          <div className="text-[12px] font-semibold uppercase tracking-widest" style={{ color: 'var(--brand)' }}>Pricing</div>
          <h2 className="mt-3 text-[32px] sm:text-[44px] font-semibold tracking-[-0.02em] leading-[1.05] text-[color:var(--ink)]">
            Simple monthly retainers. <br className="hidden sm:block"/>Cancel anytime.
          </h2>
          <p className="mt-5 text-[16px] sm:text-[17px] text-[color:var(--ink-700)] leading-relaxed">
            Ad spend not included — that goes straight to Meta. Our retainer covers strategy, creative, management, and reporting.
          </p>
          <p className="mt-3 text-[12px]" style={{ color: 'var(--brand)' }}>
            Placeholder pricing — final tiers confirmed during your consultation.
          </p>
        </Reveal>

        <div className="mt-14 grid md:grid-cols-3 gap-5 items-stretch">
          {[
            { tier: 'Starter', price: 'R 2,500', popular: false, cta: 'Book a consultation',
              desc: 'For shops just dipping their toes into paid ads.',
              features: [
                { text: '1 ad campaign per month' },
                { text: '4 social posts per month' },
                { text: 'Basic monthly report' },
                { text: 'Email support' },
              ],
            },
            { tier: 'Growth', price: 'R 5,000', popular: true, cta: 'Book a consultation',
              desc: 'Most popular — ads, content, and a chatbot working together.',
              features: [
                { bold: 'Everything in Starter, plus:', text: '' },
                { text: '12 social posts + 4 reels per month' },
                { text: 'WhatsApp chatbot setup & management' },
                { text: 'Weekly campaign optimisation' },
                { text: 'WhatsApp support' },
              ],
            },
            { tier: 'Scale', price: 'R 10,000+', popular: false, cta: 'Talk to sales',
              desc: 'Multi-channel + dedicated manager for larger shops.',
              features: [
                { bold: 'Everything in Growth, plus:', text: '' },
                { text: 'Multiple ad campaigns in parallel' },
                { text: '20+ posts/reels per month' },
                { text: 'Dedicated account manager' },
                { text: 'Priority support' },
              ],
            },
          ].map((t, i) => (
            <Reveal key={t.tier} variant="up" delay={i * 120} className="h-full">
              <ServicePriceCard {...t} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServicePriceCard({ tier, price, suffix = '/ month', desc, features, popular, cta }) {
  return (
    <div className={"relative p-7 sm:p-8 flex flex-col h-full card-hover " + (popular ? "card-dark" : "card")}>
      {popular && (
        <span className="absolute -top-3 left-1/2 -translate-x-1/2 inline-flex items-center gap-1 px-3 py-1 rounded-full text-[11px] font-semibold uppercase tracking-wider text-white" style={{ background: 'var(--brand)' }}>
          <Ax.Star className="w-3 h-3" strokeWidth={2.4} />
          Most popular
        </span>
      )}
      <div className="text-[13px] font-semibold uppercase tracking-wider" style={{ color: popular ? 'var(--brand)' : 'var(--ink-500)' }}>{tier}</div>
      <div className="mt-3 flex items-baseline gap-1.5">
        <span className="text-[40px] sm:text-[48px] font-semibold tracking-tight leading-none font-mono text-[color:var(--ink)]">{price}</span>
        <span className="text-[14px] text-[color:var(--ink-500)]">{suffix}</span>
      </div>
      <p className="mt-3 text-[14px] leading-relaxed min-h-[3em] text-[color:var(--ink-700)]">{desc}</p>
      <a href="#demo" className={"mt-6 inline-flex items-center justify-center gap-1.5 rounded-full font-semibold text-[14px] px-5 py-3 " + (popular ? "btn-primary" : "btn-ghost")}>
        {cta}
        <Ax.ArrowRight className="w-4 h-4" />
      </a>
      <div className="mt-auto pt-7 border-t border-[color:var(--line)]">
        <ul className="space-y-3">
          {features.map((f, i) => (
            <li key={i} className="flex items-start gap-2.5 text-[14px] leading-relaxed">
              <span className="inline-flex items-center justify-center w-5 h-5 rounded-full shrink-0 mt-0.5" style={{ background: 'var(--brand-soft)', border: '1px solid var(--brand-200)' }}>
                <Ax.Check className="w-3 h-3" strokeWidth={3} style={{ color: 'var(--brand-hover)' }}/>
              </span>
              <span className="text-[color:var(--ink-700)]">
                {f.bold && <strong className="font-semibold text-[color:var(--ink)]">{f.bold} </strong>}
                {f.text}
              </span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

function MarketingFAQ() {
  const faqs = [
    { q: 'How much should I spend on ads?', a: "It depends on your shop, location, and goal. A typical starter budget is R1,500–R3,000 per month in ad spend, on top of our retainer. We'll suggest a realistic number on the consultation call — and you can scale up only when the numbers work.", defaultOpen: true },
    { q: 'Do you write the content too?', a: "Yes — captions, post copy, hashtag research, and basic on-brand graphics are all included from Growth tier upwards. If you have specific brand fonts or guidelines we'll use them; if not, we'll match the look of your shop." },
    { q: 'What is the WhatsApp chatbot exactly?', a: "It's an automated assistant on your WhatsApp number. It can show your menu, take orders, answer FAQs, share your location and hours, and route messages to a human when needed. Same tech that powers AxiomPOS — works whether or not you use our POS." },
    { q: 'How long until I see results?', a: "Ads usually start producing measurable traffic in 7–14 days. WhatsApp chatbot impact is immediate (it answers messages 24/7 from day one). Sustainable growth in followers and repeat customers takes 2–3 months." },
    { q: 'Can I cancel anytime?', a: "Yes. Month-to-month, no lock-in contract. We'd appreciate 30 days' notice so we can wind down campaigns cleanly, but there's no penalty if you can't." },
    { q: 'Do you only work with shops on AxiomPOS?', a: "No — marketing is a standalone service. If you have a POS already (or none at all), we'll still run your ads and chatbot. AxiomPOS is just easier to integrate with on the WhatsApp side." },
  ];
  return (
    <section id="faq" className="py-24 sm:py-32">
      <div className="max-w-3xl mx-auto px-5 sm:px-8">
        <Reveal variant="up" className="text-center">
          <div className="text-[12px] font-semibold uppercase tracking-widest" style={{ color: 'var(--brand)' }}>FAQ</div>
          <h2 className="mt-3 text-[32px] sm:text-[44px] font-semibold tracking-[-0.02em] leading-[1.05] text-[color:var(--ink)]">Marketing, no fluff.</h2>
        </Reveal>
        <Reveal variant="up" delay={100} className="mt-12 border-t border-[color:var(--line)]">
          {faqs.map((f, i) => <FaqItem key={i} {...f} />)}
        </Reveal>
      </div>
    </section>
  );
}

function MarketingCta() {
  return (
    <section id="demo" className="py-20 sm:py-28">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
       <div className="relative rounded-3xl p-8 sm:p-12 overflow-hidden" style={{ background: 'linear-gradient(135deg, #D97706 0%, #B45309 100%)', boxShadow: '0 24px 60px rgba(217,119,6,0.30)' }}>
        <div className="absolute inset-0 pointer-events-none" aria-hidden="true" style={{ background: 'radial-gradient(60% 60% at 100% 0%, rgba(255,255,255,0.20), transparent 60%), radial-gradient(50% 50% at 0% 100%, rgba(0,0,0,0.18), transparent 60%)' }} />
        <div className="relative grid lg:grid-cols-12 gap-12 items-start">
        <Reveal variant="left" className="lg:col-span-5">
          <div className="text-[12px] font-semibold uppercase tracking-widest text-white/80">Get started</div>
          <h2 className="mt-3 text-[34px] sm:text-[44px] font-semibold tracking-[-0.02em] leading-[1.05] text-balance text-white">
            Let's get customers to your door.
          </h2>
          <p className="mt-5 text-[16px] sm:text-[17px] text-white/85 leading-relaxed max-w-md">
            Tell us about your shop and your goal. We'll come back with a realistic plan — ad budget, content cadence, and what the chatbot will do — within one business day.
          </p>
          <ContactDetails dark />
        </Reveal>

        <Reveal variant="right" delay={120} className="lg:col-span-7">
          <div className="card p-6 sm:p-8">
            <ContactForm
              source="marketing"
              submitLabel="Book a consultation"
              showMessage={false}
              extraField={{
                key: 'goal',
                label: "What's your main goal right now?",
                type: 'textarea',
                placeholder: 'More foot traffic on weekends. Automate WhatsApp orders. Build an Instagram following…',
              }}
              successBody={() => `We'll be in touch within one business day with a realistic marketing plan.`}
            />
          </div>
        </Reveal>
        </div>
       </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <PageBackground />
      <div>
        <Navbar wordmarkSuffix=" Marketing" ctaLabel="Book a consultation" />
        <main>
          <MarketingHero />
          <MarketingServices />
          <MarketingHow />
          <MarketingPricing />
          <MarketingFAQ />
          <AxiomOneCallout />
          <MarketingCta />
        </main>
        <Footer />
      </div>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
