/* global React, Icon, Reveal, useInView, useCountUp, fmt, useMagnetic */
const { useEffect, useRef, useState } = React;

/* ============ LOGO STRIP ============ */
function LogoStrip() {
  const logos = ['SPAR', 'ARCO', 'LUMEN', 'NOVA', 'BRIGHT', 'HELIX', 'FORM', 'PULSE'];
  return (
    <div className="logo-strip">
      <div className="label">Trusted by teams running campaigns at</div>
      <div className="logo-row">
        {logos.map((l) => <div key={l} className="logo">{l}</div>)}
      </div>
    </div>
  );
}

/* ============ STATS BAND ============ */
function StatsBand() {
  const [r1, v1] = useCountUp(4.2, { duration: 1800, decimals: 1 });
  const [r2, v2] = useCountUp(68, { duration: 1600 });
  const [r3, v3] = useCountUp(12, { duration: 1600 });
  const [r4, v4] = useCountUp(99.9, { duration: 1800, decimals: 1 });
  return (
    <section className="stats-band">
      <div className="stats-grid">
        <Reveal className="stat-item"><div ref={r1} className="num">{v1}×</div><div className="label">Faster campaign launches</div><div className="desc">Average time to publish</div></Reveal>
        <Reveal className="stat-item"><div ref={r2} className="num">{v2}%</div><div className="label">Hours saved per week</div><div className="desc">Across tools, meetings, reports</div></Reveal>
        <Reveal className="stat-item"><div ref={r3} className="num">{v3}+</div><div className="label">Channels supported</div><div className="desc">Social, web, paid, email</div></Reveal>
        <Reveal className="stat-item"><div ref={r4} className="num">{v4}%</div><div className="label">Uptime SLA</div><div className="desc">Hosted in EU data centres</div></Reveal>
      </div>
    </section>
  );
}

/* ============ HOW IT WORKS ============ */
function HowItWorks() {
  return (
    <section>
      <div className="section-inner">
        <Reveal className="section-head">
          <div className="section-eyebrow">HOW IT WORKS</div>
          <h2 className="section-title">From zero to <span className="gradient">launched</span> in an afternoon</h2>
          <p className="section-sub">Three steps. Connect your channels, let MarkAI learn your brand, and start shipping campaigns that actually perform.</p>
        </Reveal>

        <Reveal className="steps reveal-stagger" stagger>
          <div className="step">
            <div className="step-num">01</div>
            <h3>Connect</h3>
            <p>Sign in with Google, Meta, TikTok and LinkedIn in a single onboarding flow. GA4 and ad accounts sync in the background.</p>
            <div className="step-visual" style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
              {['instagram', 'facebook', 'tiktok', 'linkedin', 'youtube', 'x'].map((n) => (
                <div key={n} style={{ width: 38, height: 38, borderRadius: 10, background: '#fff', border: '1px solid var(--line)', display: 'grid', placeItems: 'center', color: 'var(--ink-soft)', boxShadow: '0 2px 6px rgba(0,0,0,0.04)' }}>
                  <Icon name={n} size={18}/>
                </div>
              ))}
              <div style={{ marginLeft: 'auto', padding: '6px 10px', background: 'rgba(16,185,129,0.1)', color: 'var(--emerald)', fontSize: 11, fontWeight: 700, borderRadius: 999, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                <Icon name="check" size={11}/> Connected
              </div>
            </div>
          </div>
          <div className="step">
            <div className="step-num">02</div>
            <h3>Plan</h3>
            <p>Drop posts into the calendar or let MarkAI generate a full month of content aligned to your brand voice and goals.</p>
            <div className="step-visual" style={{ padding: 10 }}>
              <div style={{ display: 'flex', gap: 6 }}>
                {[1, 2, 3, 4].map((i) => (
                  <div key={i} style={{ flex: 1, height: 70, borderRadius: 8, background: i === 2 ? 'linear-gradient(135deg, var(--violet), var(--blue))' : '#fff', border: '1px solid var(--line)', padding: 6, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                    <div style={{ fontSize: 9, fontWeight: 700, color: i === 2 ? '#fff' : 'var(--muted)' }}>{['MON', 'TUE', 'WED', 'THU'][i - 1]}</div>
                    <div style={{ display: 'flex', gap: 2 }}>
                      {i === 2 && <><span style={{ width: 4, height: 4, borderRadius: '50%', background: '#fff' }}/><span style={{ width: 4, height: 4, borderRadius: '50%', background: '#fff' }}/></>}
                      {i === 1 && <span style={{ width: 4, height: 4, borderRadius: '50%', background: '#EC4899' }}/>}
                      {i === 4 && <span style={{ width: 4, height: 4, borderRadius: '50%', background: '#2F7BFF' }}/>}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div className="step">
            <div className="step-num">03</div>
            <h3>Grow</h3>
            <p>MarkAI reviews performance, suggests the next move, and auto-scales what's working. Weekly strategy briefs in your inbox.</p>
            <div className="step-visual" style={{ padding: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
                <div>
                  <div style={{ fontSize: 10, color: 'var(--muted)', fontWeight: 600 }}>TOTAL REACH</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 800 }}>8,541</div>
                </div>
                <svg width="100" height="40" viewBox="0 0 100 40">
                  <path d="M 0 30 L 20 22 L 40 26 L 60 15 L 80 18 L 100 6" fill="none" stroke="url(#up-grad)" strokeWidth="2.5" strokeLinecap="round"/>
                  <defs>
                    <linearGradient id="up-grad" x1="0" y1="0" x2="100" y2="0" gradientUnits="userSpaceOnUse">
                      <stop stopColor="#6C5CE7"/>
                      <stop offset="1" stopColor="#10B981"/>
                    </linearGradient>
                  </defs>
                </svg>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============ TESTIMONIALS ============ */
function Testimonials() {
  const items = [
    { q: "We replaced four tools with MarkFlow. Our marketing team ships campaigns twice as fast now, and the MarkAI weekly brief is the one report our CEO actually reads.", n: 'Elena Kaufmann', r: 'Head of Growth · SPAR Latvia', av: 'EK' },
    { q: "The content calendar alone is worth it. We plan a month of posts in 45 minutes — publishing across six platforms without ever leaving the tab.", n: 'Marcus Lindqvist', r: 'Social Lead · Nova Studios', av: 'ML' },
    { q: "Finally one number I can trust. Blended channel reach, real ROAS, no spreadsheets. The live dashboard is on every monitor in our agency.", n: 'Priya Ranganathan', r: 'Founder · Helix Collective', av: 'PR' },
  ];
  return (
    <section style={{ background: '#fff' }}>
      <div className="section-inner">
        <Reveal className="section-head">
          <div className="section-eyebrow">LOVED BY MARKETERS</div>
          <h2 className="section-title">Teams ship more when they <span className="gradient">flow together</span></h2>
        </Reveal>
        <Reveal className="testimonials reveal-stagger" stagger>
          {items.map((t, i) => (
            <div key={i} className="testimonial">
              <div className="stars">{[0,0,0,0,0].map((_, j) => <Icon key={j} name="star" size={14}/>)}</div>
              <p className="quote">"{t.q}"</p>
              <div className="author">
                <div className="av">{t.av}</div>
                <div className="info">
                  <div className="n">{t.n}</div>
                  <div className="r">{t.r}</div>
                </div>
              </div>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

/* ============ PRICING ============ */
function Pricing() {
  const plans = [
    { name: 'Starter', desc: 'For solo marketers finding their flow.', price: 29, features: ['Up to 3 social channels', 'GA4 web analytics', 'Content calendar', '50 AI generations / mo', 'Email support'], cta: 'Start free', featured: false },
    { name: 'Pro', desc: 'For growing teams shipping weekly.', price: 79, features: ['All channels · unlimited', 'Paid media analytics', 'MarkAI strategy briefs', '1,000 AI generations / mo', 'Team seats · up to 5', 'Priority support'], cta: 'Start free trial', featured: true, popular: true },
    { name: 'Agency', desc: 'For agencies managing multiple brands.', price: 199, features: ['Everything in Pro', 'Unlimited brands', 'White-label reports', 'Unlimited AI generations', 'Team seats · unlimited', 'Dedicated success manager'], cta: 'Talk to sales', featured: false },
  ];
  return (
    <section id="pricing">
      <div className="section-inner">
        <Reveal className="section-head">
          <div className="section-eyebrow">PRICING</div>
          <h2 className="section-title">Simple plans. <span className="gradient">Real ROI.</span></h2>
          <p className="section-sub">Start free for 14 days. No credit card, no setup fee, cancel anytime.</p>
        </Reveal>
        <Reveal className="pricing reveal-stagger" stagger>
          {plans.map((p) => (
            <div key={p.name} className={`price-card ${p.featured ? 'featured' : ''}`}>
              {p.popular && <div className="popular-badge">MOST POPULAR</div>}
              <div className="plan-name">{p.name}</div>
              <div className="plan-desc">{p.desc}</div>
              <div className="price">
                <span className="n">€{p.price}</span>
                <span className="u">/ month</span>
              </div>
              <a className={`plan-cta ${p.featured ? 'primary' : 'ghost'}`}>{p.cta}</a>
              <ul>
                {p.features.map((f) => (
                  <li key={f}><Icon name="checkCircle" size={18}/> {f}</li>
                ))}
              </ul>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

/* ============ FINAL CTA ============ */
function FinalCTA() {
  return (
    <section className="cta-band">
      <Reveal className="cta-card">
        <h2>Your whole marketing stack, <br/>in one flow.</h2>
        <p>Join teams replacing five tools with one. Free for 14 days — no card, no commitment.</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a className="btn btn-lg btn-light">Start free trial <Icon name="arrow" size={16}/></a>
          <a className="btn btn-lg btn-glass">Book a demo</a>
        </div>
      </Reveal>
    </section>
  );
}

/* ============ FOOTER ============ */
function Footer() {
  return (
    <footer className="foot">
      <div className="foot-inner">
        <div className="foot-brand">
          <div className="name">
            <div className="nav-logo-mark"/> Markflow
          </div>
          <p>All your marketing, finally in one flow. Built in the EU for teams that ship.</p>
        </div>
        <div className="foot-col">
          <h4>Product</h4>
          <ul><li><a>Analytics</a></li><li><a>AI Agents</a></li><li><a>Calendar</a></li><li><a>Integrations</a></li></ul>
        </div>
        <div className="foot-col">
          <h4>Company</h4>
          <ul><li><a>About</a></li><li><a>Careers</a></li><li><a>Blog</a></li><li><a>Contact</a></li></ul>
        </div>
        <div className="foot-col">
          <h4>Resources</h4>
          <ul><li><a>Help Center</a></li><li><a>API Docs</a></li><li><a>Changelog</a></li><li><a>Status</a></li></ul>
        </div>
        <div className="foot-col">
          <h4>Legal</h4>
          <ul><li><a>Privacy</a></li><li><a>Terms</a></li><li><a>Security</a></li><li><a>GDPR</a></li></ul>
        </div>
      </div>
      <div className="foot-bar">
        <span>© 2026 Markflow Analytics. All rights reserved.</span>
        <span>Markflow.eu</span>
      </div>
    </footer>
  );
}

Object.assign(window, { LogoStrip, StatsBand, HowItWorks, Testimonials, Pricing, FinalCTA, Footer });