// Wozen Homepage — section components
// Uses tokens from design system: dark canvas, electric purple #8B5CF6 accent

const { useState: useStateHP, useEffect: useEffectHP } = React;

// ─────────── Shared icons (Lucide-style) ───────────
const Ico = ({ children, size = 20 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
       strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">{children}</svg>
);
const IcoPhone = (p) => <Ico {...p}><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/></Ico>;
const IcoWaves = (p) => <Ico {...p}><path d="M2 12h2M6 8v8M10 5v14M14 8v8M18 10v4M22 12h-2"/></Ico>;
const IcoChat = (p) => <Ico {...p}><path d="M21 11.5a8.4 8.4 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.4 8.4 0 01-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.4 8.4 0 013.8-.9h.5a8.5 8.5 0 018 8z"/></Ico>;
const IcoCalendar = (p) => <Ico {...p}><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18M9 16l3-3 3 3M12 13v6"/></Ico>;
const IcoDoc = (p) => <Ico {...p}><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h6M9 9h2"/></Ico>;
const IcoArrow = (p) => <Ico {...p}><path d="M5 12h14M12 5l7 7-7 7"/></Ico>;
const IcoArrowUR = (p) => <Ico {...p}><path d="M7 17L17 7M7 7h10v10"/></Ico>;
const IcoPlay = (p) => <Ico {...p}><polygon points="6 4 20 12 6 20 6 4" fill="currentColor"/></Ico>;
const IcoCheck = (p) => <Ico {...p}><path d="M20 6L9 17l-5-5"/></Ico>;
const IcoStethoscope = (p) => <Ico {...p}><path d="M4.8 2.3A.3.3 0 105 2H4a2 2 0 00-2 2v5a6 6 0 006 6 6 6 0 006-6V4a2 2 0 00-2-2h-1a.2.2 0 10.3.3"/><path d="M8 15v1a6 6 0 006 6 6 6 0 006-6v-4"/><circle cx="20" cy="10" r="2"/></Ico>;
const IcoLayers = (p) => <Ico {...p}><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></Ico>;
const IcoTarget = (p) => <Ico {...p}><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></Ico>;
const IcoTwitter = (p) => <Ico {...p}><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"/></Ico>;
const IcoLinkedin = (p) => <Ico {...p}><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-4 0v7h-4v-7a6 6 0 016-6zM2 9h4v12H2zM4 6a2 2 0 100-4 2 2 0 000 4z"/></Ico>;
const IcoYoutube = (p) => <Ico {...p}><path d="M22.5 6.5a2.78 2.78 0 00-2-2C18.8 4 12 4 12 4s-6.8 0-8.5.5a2.78 2.78 0 00-2 2A29 29 0 001 12a29 29 0 00.5 5.5 2.78 2.78 0 002 2C5.2 20 12 20 12 20s6.8 0 8.5-.5a2.78 2.78 0 002-2A29 29 0 0023 12a29 29 0 00-.5-5.5z"/><polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" fill="currentColor"/></Ico>;
const IcoSparkle = (p) => <Ico {...p}><path d="M12 3l1.9 5.8L20 11l-6.1 2.2L12 19l-1.9-5.8L4 11l6.1-2.2z"/></Ico>;

// ─────────── Floating top nav (pill, scroll-aware) ───────────
const HPNav = () => {
  const [scrolled, setScrolled] = useStateHP(false);
  useEffectHP(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav style={{
      position: 'fixed', top: 16, left: '50%', transform: 'translateX(-50%)',
      width: 'min(92%, 1180px)', zIndex: 80,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '10px 14px 10px 22px', borderRadius: 9999,
      background: scrolled ? 'rgba(13,13,18,0.78)' : 'rgba(13,13,18,0.45)',
      backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
      border: '1px solid rgba(58,58,71,0.6)',
      transition: 'background 250ms ease, box-shadow 250ms ease',
      boxShadow: scrolled ? '0 12px 40px -12px rgba(0,0,0,0.6)' : 'none'
    }}>
      <a href="#top" style={{ textDecoration: 'none' }}><WozenLogo size={20}/></a>
      <div style={{ display: 'flex', alignItems: 'center', gap: 28 }} className="hp-nav-links">
        {['Products', 'Pricing', 'Docs', 'About'].map(l => (
          <a key={l} href={'#' + l.toLowerCase()} className="hp-nav-link"
             style={{ fontSize: 13, fontWeight: 500, color: '#A1A1AA', textDecoration: 'none', transition: 'color 200ms' }}>
            {l}
          </a>
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <a href="#" className="hp-nav-link" style={{ fontSize: 13, fontWeight: 500, color: '#A1A1AA', textDecoration: 'none', padding: '8px 12px' }}>Sign in</a>
        <a href="#products" className="hp-btn-primary" style={{
          padding: '10px 18px', borderRadius: 9999, background: '#8B5CF6',
          color: '#fff', fontSize: 13, fontWeight: 700, textDecoration: 'none',
          boxShadow: '0 0 30px -8px #8B5CF6', display: 'inline-flex', alignItems: 'center', gap: 6
        }}>Get started <IcoArrow size={14}/></a>
      </div>
    </nav>
  );
};

// ─────────── Hero ───────────
const HPHero = () => (
  <section id="top" style={{ position: 'relative', padding: '180px 24px 120px', overflow: 'hidden' }}>
    {/* halo */}
    <div style={{
      position: 'absolute', top: '5%', left: '50%', width: 720, height: 720, transform: 'translateX(-50%)',
      background: 'rgba(139,92,246,0.22)', borderRadius: '50%', filter: 'blur(160px)', pointerEvents: 'none'
    }}/>
    <div style={{
      position: 'absolute', top: '40%', right: '-8%', width: 420, height: 420,
      background: 'rgba(139,92,246,0.10)', borderRadius: '50%', filter: 'blur(140px)', pointerEvents: 'none'
    }}/>

    <div style={{ position: 'relative', maxWidth: 1080, margin: '0 auto', textAlign: 'center' }}>
      <span style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        border: '1px solid rgba(139,92,246,0.35)', borderRadius: 9999,
        padding: '6px 14px', background: 'rgba(139,92,246,0.06)',
        color: '#C4B5FD', fontFamily: 'JetBrains Mono', fontSize: 11,
        letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500,
        marginBottom: 32, backdropFilter: 'blur(8px)'
      }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#34D399', boxShadow: '0 0 0 4px rgba(52,211,153,0.2)' }}/>
        Catchline live · 3 more shipping in 2026
      </span>

      <h1 className="hp-h1" style={{
        fontWeight: 700, fontSize: 'clamp(44px, 7.4vw, 96px)',
        lineHeight: 1.02, letterSpacing: '-0.035em',
        margin: '0 auto 28px', maxWidth: 980,
        textWrap: 'balance'
      }}>
        The Wozen Stack —<br/>
        <span style={{ color: '#A1A1AA', fontWeight: 600 }}>AI tools for </span>
        <span style={{ fontFamily: '"Playfair Display", serif', fontStyle: 'italic', fontWeight: 400, color: '#A78BFA' }}>modern clinics.</span>
      </h1>

      <p style={{
        fontSize: 'clamp(17px, 1.6vw, 21px)', color: '#A1A1AA', fontWeight: 300,
        maxWidth: 660, margin: '0 auto 44px', lineHeight: 1.55
      }}>
        4 products, one platform. Built for AU/UK clinics that want to grow without hiring a new front desk.
      </p>

      <div style={{ display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
        <a href="#products" className="hp-btn-primary" style={{
          padding: '15px 28px', borderRadius: 9999, background: '#8B5CF6',
          color: '#fff', fontSize: 14, fontWeight: 700, textDecoration: 'none',
          boxShadow: '0 0 50px -10px #8B5CF6',
          display: 'inline-flex', alignItems: 'center', gap: 8
        }}>
          Explore products <IcoArrow size={16}/>
        </a>
        <a href="#" className="hp-btn-secondary" style={{
          padding: '15px 24px', borderRadius: 9999,
          background: 'rgba(255,255,255,0.06)', border: '1px solid #3A3A47',
          color: '#FAF8F5', fontSize: 14, fontWeight: 600, textDecoration: 'none',
          backdropFilter: 'blur(8px)', display: 'inline-flex', alignItems: 'center', gap: 10
        }}>
          <span style={{
            width: 24, height: 24, borderRadius: '50%', background: 'rgba(139,92,246,0.18)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#A78BFA'
          }}>
            <IcoPlay size={10}/>
          </span>
          Watch 2-min overview
        </a>
      </div>

      {/* small footnote */}
      <div style={{
        marginTop: 56, display: 'flex', justifyContent: 'center', gap: 32, flexWrap: 'wrap',
        fontFamily: 'JetBrains Mono', fontSize: 11, color: '#71717A', letterSpacing: '0.12em', textTransform: 'uppercase'
      }}>
        <span>AU + UK clinics</span>
        <span style={{ color: '#3A3A47' }}>/</span>
        <span>Built by Adboosta</span>
        <span style={{ color: '#3A3A47' }}>/</span>
        <span>Sydney HQ</span>
      </div>
    </div>
  </section>
);

// ─────────── Product card ───────────
const ProductCard = ({ icon: Icon, name, tagline, badge, badgeKind, cta, ctaHref, body, accentDim }) => {
  const [hover, setHover] = useStateHP(false);
  const isLive = badgeKind === 'live';
  return (
    <a href={ctaHref || '#'}
       onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
       style={{
         display: 'block', textDecoration: 'none', color: 'inherit',
         background: '#1F1A2E',
         border: `1px solid ${hover ? 'rgba(139,92,246,0.4)' : '#2D2740'}`,
         borderRadius: 32, padding: 36, position: 'relative', overflow: 'hidden',
         transition: 'border-color 250ms ease, transform 250ms ease',
         transform: hover ? 'translateY(-2px)' : 'none'
       }}>
      {/* corner glow on hover */}
      <div style={{
        position: 'absolute', top: -80, right: -80, width: 280, height: 280,
        background: accentDim ? 'rgba(139,92,246,0.05)' : 'rgba(139,92,246,0.16)',
        borderRadius: '50%', filter: 'blur(80px)',
        opacity: hover ? 1 : 0.55, transition: 'opacity 300ms'
      }}/>

      <div style={{ position: 'relative', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 28 }}>
        <div style={{
          width: 56, height: 56, borderRadius: 16,
          background: 'linear-gradient(135deg, rgba(139,92,246,0.22), rgba(139,92,246,0.05))',
          border: '1px solid rgba(139,92,246,0.3)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#C4B5FD'
        }}>
          <Icon size={26}/>
        </div>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '5px 11px', borderRadius: 9999,
          background: isLive ? 'rgba(52,211,153,0.10)' : 'rgba(255,255,255,0.05)',
          border: `1px solid ${isLive ? 'rgba(52,211,153,0.3)' : '#3A3A47'}`,
          fontFamily: 'JetBrains Mono', fontSize: 10, fontWeight: 600,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          color: isLive ? '#34D399' : '#A1A1AA'
        }}>
          {isLive && <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#34D399', boxShadow: '0 0 8px #34D399' }}/>}
          {badge}
        </span>
      </div>

      <div style={{ position: 'relative' }}>
        <h3 style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', marginBottom: 6 }}>{name}</h3>
        <p style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#A78BFA', marginBottom: 16, fontWeight: 500 }}>
          {tagline}
        </p>
        <p style={{ fontSize: 15, color: '#A1A1AA', lineHeight: 1.65, marginBottom: 28, maxWidth: 460 }}>
          {body}
        </p>

        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontSize: 14, fontWeight: 600, color: '#FAF8F5',
          paddingBottom: 4, borderBottom: '1px solid #3A3A47',
          transition: 'border-color 200ms, gap 200ms',
          ...(hover && { borderColor: '#8B5CF6', gap: 12 })
        }}>
          {cta} <IcoArrowUR size={14}/>
        </div>
      </div>
    </a>
  );
};

const HPProducts = () => (
  <section id="products" style={{ padding: '40px 24px 120px', position: 'relative' }}>
    <div style={{ maxWidth: 1180, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 64 }}>
        <span className="hp-eyebrow" style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#A78BFA', fontWeight: 500 }}>
          The stack
        </span>
        <h2 style={{
          fontSize: 'clamp(36px, 4.4vw, 56px)', fontWeight: 700,
          letterSpacing: '-0.025em', lineHeight: 1.1, marginTop: 16, maxWidth: 720, marginInline: 'auto'
        }}>
          Four products that work together.<br/>
          <span style={{ color: '#71717A' }}>Pick one. Or run the whole stack.</span>
        </h2>
      </div>

      <div className="hp-product-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
        <ProductCard
          icon={(p) => <div style={{ position: 'relative' }}><IcoPhone {...p}/><div style={{ position: 'absolute', top: -2, right: -8, color: '#A78BFA' }}><IcoWaves size={14}/></div></div>}
          name="Catchline"
          tagline="Voice AI receptionist"
          badge="Live now"
          badgeKind="live"
          cta="Visit catchline.com.au"
          ctaHref="https://catchline.com.au"
          body="A voice agent that answers every call, books appointments, and routes urgent cases — 24/7. Trained on your clinic's protocols, fluent in plain English."
        />
        <ProductCard
          icon={IcoChat}
          name="Wozen Chat"
          tagline="Website + SMS chatbot"
          badge="Live now"
          badgeKind="live"
          cta="View product"
          ctaHref="#"
          body="The chat layer that captures and qualifies leads on your site, Instagram DMs, and SMS. Same brain as Catchline — text instead of voice."
        />
        <ProductCard
          icon={IcoCalendar}
          name="Wozen Rebook"
          tagline="Patient reactivation"
          badge="Coming June 2026"
          cta="Join waitlist"
          ctaHref="#"
          body="Pulls dormant patients back through the door automatically. Reads your PMS, segments by recency, sends the right nudge at the right time."
          accentDim
        />
        <ProductCard
          icon={IcoDoc}
          name="Wozen Notes"
          tagline="Clinical scribe"
          badge="Coming July 2026"
          cta="Join waitlist"
          ctaHref="#"
          body="Ambient AI scribe that listens to consults and writes the SOAP note — back to you for review in seconds, not hours."
          accentDim
        />
      </div>
    </div>
  </section>
);

// ─────────── Why Wozen ───────────
const HPWhy = () => {
  const features = [
    {
      icon: IcoStethoscope,
      title: 'Built for clinics specifically',
      body: 'Not a generic AI wrapper. Every product is trained on real clinic workflows — intake, triage, recall, billing — across dental, derm, physio, and aesthetics.',
      tag: 'Vertical-native'
    },
    {
      icon: IcoTarget,
      title: 'Server-side attribution included',
      body: 'Every call, chat, and rebook is stamped to source. Meta CAPI + Google Enhanced Conversions wired in by default — your ad spend finally tells the truth.',
      tag: 'Tracking'
    },
    {
      icon: IcoLayers,
      title: 'One billing, all tools',
      body: 'Add Catchline today. Switch on Rebook in June. Notes in July. One subscription, one dashboard, no procurement loop every time you want a new tool.',
      tag: 'Bundled'
    }
  ];
  return (
    <section style={{ padding: '120px 24px', position: 'relative', borderTop: '1px solid rgba(58,58,71,0.4)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'flex-end', marginBottom: 64 }} className="hp-why-head">
          <div>
            <span style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#A78BFA', fontWeight: 500 }}>
              Why Wozen
            </span>
            <h2 style={{
              fontSize: 'clamp(36px, 4.2vw, 52px)', fontWeight: 700,
              letterSpacing: '-0.025em', lineHeight: 1.08, marginTop: 16
            }}>
              The stack other<br/>clinic tools <span style={{ fontFamily: '"Playfair Display", serif', fontStyle: 'italic', fontWeight: 400, color: '#A78BFA' }}>wish they were.</span>
            </h2>
          </div>
          <p style={{ fontSize: 17, color: '#A1A1AA', lineHeight: 1.65, maxWidth: 460 }}>
            We're not retrofitting B2B SaaS onto healthcare. The Wozen stack was designed from day one for the clinic owner who's wearing too many hats — and would like to wear fewer.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid #2A2A35' }} className="hp-why-grid">
          {features.map((f, i) => {
            const Icon = f.icon;
            return (
              <div key={i} style={{
                padding: '40px 36px 40px 0',
                paddingLeft: i === 0 ? 0 : 36,
                borderRight: i < 2 ? '1px solid #2A2A35' : 'none',
                paddingRight: i === 2 ? 0 : 36
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: 'rgba(139,92,246,0.10)',
                  border: '1px solid rgba(139,92,246,0.25)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: '#A78BFA', marginBottom: 28
                }}>
                  <Icon size={20}/>
                </div>
                <p style={{ fontFamily: 'JetBrains Mono', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#71717A', fontWeight: 500, marginBottom: 12 }}>
                  {f.tag}
                </p>
                <h3 style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.015em', lineHeight: 1.25, marginBottom: 14 }}>
                  {f.title}
                </h3>
                <p style={{ fontSize: 15, color: '#A1A1AA', lineHeight: 1.65 }}>{f.body}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ─────────── Bundle pricing teaser ───────────
const HPPricing = () => (
  <section id="pricing" style={{ padding: '80px 24px 120px' }}>
    <div style={{ maxWidth: 1080, margin: '0 auto' }}>
      <div style={{
        position: 'relative', borderRadius: 48, overflow: 'hidden',
        background: 'linear-gradient(135deg, #1F1A2E 0%, #15121F 100%)',
        border: '1px solid #2D2740',
        padding: 'clamp(40px, 5vw, 72px)'
      }}>
        {/* halo */}
        <div style={{
          position: 'absolute', top: -200, right: -200, width: 600, height: 600,
          background: 'rgba(139,92,246,0.18)', borderRadius: '50%', filter: 'blur(160px)', pointerEvents: 'none'
        }}/>

        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'center' }} className="hp-bundle-grid">
          <div>
            <span style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#A78BFA', fontWeight: 500 }}>
              Bundle pricing
            </span>
            <h2 style={{
              fontSize: 'clamp(32px, 3.8vw, 48px)', fontWeight: 700,
              letterSpacing: '-0.025em', lineHeight: 1.1, marginTop: 14, marginBottom: 20
            }}>
              Get all 4 products from <span style={{ color: '#A78BFA' }}>$1,250</span><span style={{ color: '#71717A', fontSize: '0.55em', fontWeight: 500 }}>/month</span>
            </h2>
            <p style={{ fontSize: 16, color: '#A1A1AA', lineHeight: 1.65, marginBottom: 32, maxWidth: 480 }}>
              Save ~40% vs buying tools individually. Founders' pricing locked in for 12 months — no review, no surprise increase.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#" className="hp-btn-primary" style={{
                padding: '14px 26px', borderRadius: 9999, background: '#8B5CF6',
                color: '#fff', fontSize: 14, fontWeight: 700, textDecoration: 'none',
                boxShadow: '0 0 40px -10px #8B5CF6', display: 'inline-flex', alignItems: 'center', gap: 8
              }}>
                See pricing <IcoArrow size={14}/>
              </a>
              <a href="#" style={{
                padding: '14px 22px', borderRadius: 9999,
                background: 'transparent', border: '1px solid #3A3A47',
                color: '#FAF8F5', fontSize: 14, fontWeight: 600, textDecoration: 'none'
              }}>
                Talk to sales
              </a>
            </div>
          </div>
          <div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                'All 4 products, one invoice',
                'Unlimited Catchline minutes',
                'Server-side attribution wired in',
                'Founders\' pricing locked 12 mo',
                '24/7 founder-led support'
              ].map(item => (
                <li key={item} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 15, color: '#FAF8F5' }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: '50%', flexShrink: 0,
                    background: 'rgba(139,92,246,0.18)', border: '1px solid rgba(139,92,246,0.4)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#A78BFA'
                  }}>
                    <IcoCheck size={12}/>
                  </span>
                  {item}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ─────────── Trusted by ───────────
const HPTrusted = () => (
  <section style={{ padding: '40px 24px 120px' }}>
    <div style={{ maxWidth: 1080, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 56 }}>
        <p style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#71717A', fontWeight: 500 }}>
          Trusted by clinic owners
        </p>
      </div>

      {/* Logo strip */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0,
        borderTop: '1px solid #2A2A35', borderBottom: '1px solid #2A2A35',
        marginBottom: 64
      }} className="hp-logo-strip">
        {[
          'Bottoms Up Colonics',
          'Bondi Smile Co.',
          'Manly Physio',
          'The Skin Lab',
          'Clearview Dental'
        ].map((name, i) => (
          <div key={name} style={{
            padding: '32px 16px', textAlign: 'center',
            borderRight: i < 4 ? '1px solid #2A2A35' : 'none',
            color: '#71717A', fontFamily: 'Inter', fontWeight: 700, fontSize: 14,
            letterSpacing: '-0.01em', display: 'flex', alignItems: 'center', justifyContent: 'center',
            opacity: 0.7
          }}>
            {name}
          </div>
        ))}
      </div>

      {/* Quote */}
      <div style={{
        display: 'grid', gridTemplateColumns: '120px 1fr', gap: 40, alignItems: 'flex-start', maxWidth: 880, margin: '0 auto'
      }} className="hp-quote-grid">
        <div style={{
          width: 120, height: 120, borderRadius: 24,
          background: 'linear-gradient(135deg, #8B5CF6, #FF0073)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'Inter', fontWeight: 800, fontSize: 40, color: '#fff',
          letterSpacing: '-0.03em', flexShrink: 0
        }}>
          BU
        </div>
        <div>
          <p style={{
            fontSize: 'clamp(20px, 2.4vw, 28px)', lineHeight: 1.4,
            letterSpacing: '-0.015em', fontWeight: 500, marginBottom: 24,
            textWrap: 'pretty'
          }}>
            "Catchline picks up calls at 9pm on a Sunday. Three months in we'd booked <span style={{ color: '#A78BFA' }}>62 appointments</span> we'd otherwise have missed. The Wozen team ships faster than any agency I've worked with."
          </p>
          <div>
            <p style={{ fontWeight: 700, fontSize: 15, marginBottom: 2 }}>Sarah Chen</p>
            <p style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#A1A1AA' }}>
              Founder · Bottoms Up Colonics
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ─────────── Final CTA ───────────
const HPFinalCTA = () => (
  <section style={{ padding: '80px 24px 140px', position: 'relative', overflow: 'hidden' }}>
    <div style={{
      position: 'absolute', bottom: '-30%', left: '50%', width: 900, height: 600, transform: 'translateX(-50%)',
      background: 'radial-gradient(ellipse at center, rgba(139,92,246,0.18), transparent 60%)',
      pointerEvents: 'none'
    }}/>
    <div style={{ position: 'relative', maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
      <span style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#A78BFA', fontWeight: 500 }}>
        The path
      </span>
      <h2 style={{
        fontSize: 'clamp(40px, 5.6vw, 72px)', fontWeight: 700,
        letterSpacing: '-0.03em', lineHeight: 1.05, marginTop: 20, marginBottom: 24,
        textWrap: 'balance'
      }}>
        Start with Catchline today.<br/>
        <span style={{ fontFamily: '"Playfair Display", serif', fontStyle: 'italic', fontWeight: 400, color: '#A78BFA' }}>Add tools as you grow.</span>
      </h2>
      <p style={{ fontSize: 18, color: '#A1A1AA', lineHeight: 1.6, marginBottom: 40, maxWidth: 560, marginInline: 'auto' }}>
        No procurement marathons. No 12-month contracts you'll regret. Switch on what you need, when you need it.
      </p>
      <div style={{ display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
        <a href="https://catchline.com.au" className="hp-btn-primary" style={{
          padding: '15px 28px', borderRadius: 9999, background: '#8B5CF6',
          color: '#fff', fontSize: 14, fontWeight: 700, textDecoration: 'none',
          boxShadow: '0 0 50px -10px #8B5CF6',
          display: 'inline-flex', alignItems: 'center', gap: 8
        }}>
          Start with Catchline <IcoArrow size={16}/>
        </a>
        <a href="#" style={{
          padding: '15px 24px', borderRadius: 9999,
          background: 'rgba(255,255,255,0.06)', border: '1px solid #3A3A47',
          color: '#FAF8F5', fontSize: 14, fontWeight: 600, textDecoration: 'none',
          backdropFilter: 'blur(8px)'
        }}>
          Book a 15-min chat
        </a>
      </div>
    </div>
  </section>
);

// ─────────── Footer ───────────
const HPFooter = () => {
  const cols = [
    { label: 'Products', items: [
      ['Catchline', 'https://catchline.com.au'],
      ['Wozen Chat', '#'],
      ['Wozen Rebook', '#'],
      ['Wozen Notes', '#'],
      ['Pricing', '#pricing']
    ]},
    { label: 'Company', items: [
      ['About', '#'],
      ['Adboosta (sister)', '#'],
      ['Careers', '#'],
      ['Press kit', '#'],
      ['Privacy', '#']
    ]},
    { label: 'Connect', items: [
      ['Docs', '#'],
      ['Status', '#'],
      ['Contact sales', '#'],
      ['Changelog', '#']
    ]}
  ];

  return (
    <footer style={{
      borderTop: '1px solid #2A2A35', background: '#08080A',
      padding: '72px 24px 40px'
    }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 48, marginBottom: 64 }} className="hp-footer-grid">
          <div>
            <WozenLogo size={20}/>
            <p style={{ fontSize: 14, color: '#A1A1AA', lineHeight: 1.65, marginTop: 20, maxWidth: 320 }}>
              The SaaS umbrella for AI clinic tools. Built in Sydney for AU + UK clinic owners.
            </p>
            <div style={{ display: 'flex', gap: 8, marginTop: 24 }}>
              {[IcoTwitter, IcoLinkedin, IcoYoutube].map((I, i) => (
                <a key={i} href="#" style={{
                  width: 36, height: 36, borderRadius: 10,
                  background: 'rgba(58,58,71,0.4)', border: '1px solid #2A2A35',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: '#A1A1AA', textDecoration: 'none', transition: 'all 200ms'
                }} className="hp-social">
                  <I size={15}/>
                </a>
              ))}
            </div>
          </div>
          {cols.map(col => (
            <div key={col.label}>
              <p style={{ fontFamily: 'JetBrains Mono', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#71717A', fontWeight: 600, marginBottom: 18 }}>
                {col.label}
              </p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.items.map(([name, href]) => (
                  <li key={name}>
                    <a href={href} className="hp-footer-link" style={{
                      fontSize: 14, color: '#A1A1AA', textDecoration: 'none', transition: 'color 200ms'
                    }}>{name}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          paddingTop: 32, borderTop: '1px solid #2A2A35',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap'
        }}>
          <p style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: '#71717A', letterSpacing: '0.04em' }}>
            © 2026 Wozen Pty Ltd · <span style={{ color: '#A1A1AA' }}>Sister brand to <a href="#" style={{ color: '#FF0073', textDecoration: 'none' }}>Adboosta</a></span>
          </p>
          <p style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: '#71717A', letterSpacing: '0.04em', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#34D399', boxShadow: '0 0 8px #34D399' }}/>
            All systems operational
          </p>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, {
  HPNav, HPHero, HPProducts, HPWhy, HPPricing, HPTrusted, HPFinalCTA, HPFooter
});
