/* global React, ReactDOM, PuffyKit, PuffySite */
// Home page — Puffy landing.

const { MINT, MINT_STROKE, TEAL, TEXT, T2, T3, GLASS,
        Icon, StatusBar, Phone, PetTitlePill, GlassCircle,
        PassportCard, Group, Row, TabBar, PawScatter, Puffy } = window.PuffyKit;
const { Nav, Footer, Waitlist, WaitlistCta, DogIllustration, PawMark, Reveal, Section, PuffyLogoMark, Penguin, ScreenshotSlot, useI18n } = window.PuffySite;

// Hero copy variants
const HERO_COPY = {
  short: {
    h1: 'Puffy:\npeace of mind\nfor your dog.',
    lede: null,
  },
  medium: {
    h1: 'Puffy:\npeace of mind\nfor your dog.',
    lede: 'A calm iOS companion for dog owners. Pet passport, care calendar and Asky AI — all in one place.',
  },
  long: {
    h1: 'Puffy:\neverything about\nyour dog, in one app.',
    lede: 'A calm iOS companion for dog owners. Pet passport, care calendar and Asky AI — so you know what to do, and when to see a vet.',
  },
};

function App() {
  // Re-render whole tree on language change so every component picks up new strings.
  useI18n();
  return (
    <>
      <Nav active="home"/>
      <Hero/>
      <HowItWorks/>
      <FeatureGlance/>
      <AskyShowcase/>
      <Testimonials/>
      <FaqSection/>
      <FinalCta/>
      <Footer/>
    </>
  );
}

// ─── Hero ─────────────────────────────────────────────────
// A big rounded hero panel that holds the headline, CTAs and a row of
// feature-icon pips up top. Below it, a horizontal row of feature cards
// scrolls — the first few slide up behind the hero panel's bottom edge.

const HERO_ICONS = [
  { icon: 'paw',         label: 'Pet passport' },
  { icon: 'sparkles',    label: 'Asky AI',      active: true },
  { icon: 'calendar',    label: 'Care calendar' },
  { icon: 'qrcode',      label: 'Shareable QR' },
  { icon: 'heart',       label: 'Health log' },
  { icon: 'star-shield', label: 'Vaccines' },
  { icon: 'record',      label: 'Records' },
];

const HERO_FEATURES = [
  { title: 'Pet passport\nat a glance',     tint: 'mint',    kind: 'passport', href: 'feature-passport.html' },
  { title: 'Care calendar\nthat stays calm', tint: 'cream',  kind: 'calendar', href: 'feature-life.html' },
  { title: 'Asky AI\nvet companion',         tint: 'sky',     kind: 'asky',     href: 'feature-asky.html' },
  { title: 'Vaccination\nreminders',         tint: 'peach',   kind: 'vaccine',  href: 'feature-life.html#vaccines' },
  { title: 'Shareable QR\npet tag',          tint: 'lilac',   kind: 'qr',       href: 'feature-passport.html#qr' },
  { title: 'Personalized\n3D avatar',        tint: 'mint',    kind: 'avatar',   href: 'feature-avatar.html' },
  { title: 'On every\nApple device',         tint: 'cream',   kind: 'devices',  href: 'features.html' },
];

function Hero() {
  const { t } = useI18n();
  const copy = { h1: t('hero.h1'), lede: t('hero.lede') };
  return (
    <section style={{
      background: '#F5EFE6',
      padding: 0,
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{ width: '100%', margin: 0, padding: 0, position: 'relative' }}>
        {/* Hero panel — full bleed, no rounded edges */}
        <div style={{
          position: 'relative',
          borderRadius: 0,
          overflow: 'hidden',
          background: 'linear-gradient(165deg, #F5EFE6 0%, #EFE6D5 55%, #E6D9BF 100%)',
          minHeight: 640,
          padding: '96px 48px 240px',
          color: TEXT,
        }}>
          {/* soft light washes — gentle highlights, no paws */}
          <div aria-hidden style={{
            position: 'absolute', inset: 0, pointerEvents: 'none',
            background: 'radial-gradient(900px 500px at 80% 20%, rgba(255,255,255,0.45), transparent 60%),' +
                         'radial-gradient(700px 400px at 10% 90%, rgba(230,217,191,0.6), transparent 60%)',
          }}/>

          {/* Top row — feature icon pips */}
          <div style={{ display: 'none' }}>
            {HERO_ICONS.map((it, i) => (
              <div key={i} title={it.label} style={{
                width: 40, height: 40, borderRadius: '50%',
                background: it.active ? '#fff' : 'rgba(255,255,255,0.35)',
                border: it.active ? `2px solid ${MINT_STROKE}` : '1px solid rgba(255,255,255,0.55)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                backdropFilter: 'blur(10px)',
                WebkitBackdropFilter: 'blur(10px)',
                boxShadow: it.active ? '0 6px 18px rgba(0,0,0,0.08)' : 'none',
              }}>
                <Icon name={it.icon === 'paw' ? 'profile' : it.icon} size={18}
                      color={it.active ? TEAL : TEXT}
                      weight={2}/>
              </div>
            ))}
          </div>

          {/* Headline */}
          <Reveal>
            <h1 style={{
              position: 'relative',
              fontSize: 'clamp(44px, 6vw, 76px)',
              fontWeight: 860,
              lineHeight: 1.02,
              letterSpacing: '-0.025em',
              color: TEXT,
              margin: '0 auto 20px',
              textAlign: 'center',
              whiteSpace: 'pre-line',
              maxWidth: 900,
            }}>
              {copy.h1}
            </h1>
            {copy.lede && (
              <p style={{
                position: 'relative',
                fontSize: 18, lineHeight: 1.45,
                color: 'rgba(0,0,0,0.7)',
                margin: '0 auto 32px', textAlign: 'center',
                maxWidth: 560, textWrap: 'pretty',
              }}>
                {copy.lede}
              </p>
            )}

            {/* CTAs */}
            <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
              <a href="get-access.html" className="p-btn" style={{
                background: MINT,
                border: `3px solid ${MINT_STROKE}`,
                color: '#000',
                fontWeight: 590, fontSize: 16,
                boxShadow: '0 8px 24px rgba(0,0,0,0.08)',
                padding: '0 28px', height: 56,
              }}>
                {t('nav.cta')}
              </a>
              <a href="features.html" className="p-btn" style={{
                background: '#fff',
                color: TEXT,
                fontWeight: 590, fontSize: 16,
                padding: '0 26px', height: 56,
                border: 'none',
              }}>
                {t('features.cta')}
              </a>
            </div>

          </Reveal>
        </div>

        {/* Feature card row — overlaps the hero panel bottom */}
        <HeroFeatureRow/>
      </div>
    </section>
  );
}

// Horizontal card row, cards peek up from behind the hero panel bottom.
function HeroFeatureRow() {
  const scrollRef = React.useRef(null);
  const pausedRef = React.useRef(false);
  const scroll = (dir) => {
    const el = scrollRef.current;
    if (!el) return;
    el.scrollBy({ left: dir * 420, behavior: 'smooth' });
  };

  // Auto-advance every 3s. Loops back to start when near end.
  // Pauses while the user interacts.
  React.useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    const pause = () => { pausedRef.current = true; };
    const resumeSoon = () => { setTimeout(() => { pausedRef.current = false; }, 4000); };
    el.addEventListener('pointerdown', pause);
    el.addEventListener('pointerup',   resumeSoon);
    el.addEventListener('mouseenter',  pause);
    el.addEventListener('mouseleave',  () => { pausedRef.current = false; });

    const tick = () => {
      if (pausedRef.current) return;
      if (document.hidden) return;
      const max = el.scrollWidth - el.clientWidth;
      if (el.scrollLeft >= max - 8) {
        el.scrollTo({ left: 0, behavior: 'smooth' });
      } else {
        el.scrollBy({ left: 280, behavior: 'smooth' });
      }
    };
    const id = setInterval(tick, 3000);
    return () => {
      clearInterval(id);
      el.removeEventListener('pointerdown', pause);
      el.removeEventListener('pointerup',   resumeSoon);
      el.removeEventListener('mouseenter',  pause);
    };
  }, []);

  const userScroll = (dir) => {
    pausedRef.current = true;
    scroll(dir);
    setTimeout(() => { pausedRef.current = false; }, 4000);
  };

  return (
    <div style={{ position: 'relative', marginTop: -200, paddingBottom: 24 }}>
      <div
        ref={scrollRef}
        style={{
          display: 'flex', gap: 16,
          overflowX: 'auto', overflowY: 'visible',
          padding: '8px 8px 24px',
          scrollSnapType: 'x mandatory',
          scrollbarWidth: 'none',
          msOverflowStyle: 'none',
          WebkitOverflowScrolling: 'touch',
          maskImage: 'linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%)',
        }}
      >
        <style>{`
          .p-hero-scroll::-webkit-scrollbar { display: none; }
        `}</style>
        {HERO_FEATURES.map((f, i) => (
          <FeatureCard key={i} data={f}/>
        ))}
      </div>

      {/* Scroll controls */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: 10, marginTop: 8 }}>
        <button onClick={() => userScroll(-1)} aria-label="Scroll left"
          style={scrollBtnStyle}>
          <Icon name="back" size={18} color={TEXT} weight={2.5}/>
        </button>
        <button onClick={() => userScroll(1)} aria-label="Scroll right"
          style={scrollBtnStyle}>
          <Icon name="chevron-right" size={18} color={TEXT} weight={2.5}/>
        </button>
      </div>
    </div>
  );
}

const scrollBtnStyle = {
  width: 44, height: 44, borderRadius: '50%',
  background: '#fff', border: '1px solid rgba(0,0,0,0.08)',
  cursor: 'pointer',
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
  boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
};

// Individual card — tinted background, illustrated / iconographic placeholder.
function FeatureCard({ data }) {
  const tints = {
    mint:   { bg: '#D7F6F1', ink: TEXT },
    cream:  { bg: '#F6EFDD', ink: TEXT },
    sky:    { bg: '#DCE9F9', ink: TEXT },
    peach:  { bg: '#FAE1D0', ink: TEXT },
    lilac:  { bg: '#E4DDF5', ink: TEXT },
  };
  const t = tints[data.tint] || tints.mint;
  const Wrapper = data.href ? 'a' : 'div';
  return (
    <Wrapper
      href={data.href || undefined}
      style={{
        flex: '0 0 260px',
        height: 340,
        scrollSnapAlign: 'start',
        background: t.bg,
        borderRadius: 28,
        padding: 24,
        display: 'flex', flexDirection: 'column',
        justifyContent: 'space-between',
        position: 'relative', overflow: 'hidden',
        boxShadow: '0 2px 16px rgba(0,0,0,0.04)',
        textDecoration: 'none',
        color: 'inherit',
        cursor: data.href ? 'pointer' : 'default',
        transition: 'transform 220ms var(--puffy-ease), box-shadow 220ms var(--puffy-ease)',
      }}
      onMouseOver={data.href ? (e) => {
        e.currentTarget.style.transform = 'translateY(-4px)';
        e.currentTarget.style.boxShadow = '0 12px 28px rgba(0,0,0,0.08)';
      } : undefined}
      onMouseOut={data.href ? (e) => {
        e.currentTarget.style.transform = 'none';
        e.currentTarget.style.boxShadow = '0 2px 16px rgba(0,0,0,0.04)';
      } : undefined}
    >
      <div style={{
        display: 'flex', justifyContent: 'space-between',
        alignItems: 'flex-start', gap: 10,
      }}>
        <div style={{
          fontSize: 18, fontWeight: 700,
          color: t.ink, letterSpacing: '-0.015em',
          lineHeight: 1.2, whiteSpace: 'pre-line',
        }}>
          {data.title}
        </div>
        {data.href && (
          <span style={{
            flexShrink: 0, width: 32, height: 32, borderRadius: '50%',
            background: 'rgba(255,255,255,0.7)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name="chevron-right" size={14} color={TEXT} weight={2.5}/>
          </span>
        )}
      </div>
      <FeatureArt kind={data.kind}/>
    </Wrapper>
  );
}

// Placeholder illustrations — simple geometric takes on each feature
// using Puffy's palette (mint / teal / orange accents). Kept intentionally
// low-fidelity; swap for real artwork later.
function FeatureArt({ kind }) {
  const ORANGE = '#FF8A3D';
  const DEEP_MINT = '#1FB9A7';
  switch (kind) {
    case 'passport':
      return (
        <div style={{ position: 'relative', height: 170 }}>
          {/* Passport card */}
          <div style={{
            position: 'absolute', left: 20, bottom: 0,
            width: 180, height: 120, borderRadius: 14,
            background: '#fff', border: `2px solid ${MINT_STROKE}`,
            boxShadow: '0 10px 24px rgba(0,0,0,0.08)',
            padding: 12,
          }}>
            <div style={{ fontSize: 9, fontWeight: 700, color: TEAL, letterSpacing: '0.1em', textTransform: 'uppercase' }}>passport</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 14 }}>
              <div style={{ width: 40, height: 40, borderRadius: '50%', background: MINT, border: `1.5px solid ${MINT_STROKE}` }}/>
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, color: TEXT }}>Jessica</div>
                <div style={{ fontSize: 9, color: T2 }}>Golden · 2 yrs</div>
              </div>
            </div>
            <div style={{ position: 'absolute', right: 10, bottom: 10, width: 28, height: 28 }}>
              <Icon name="qrcode" size={28} color={TEAL} weight={1.8}/>
            </div>
          </div>
          {/* Paw ribbon (removed per design — keep room if re-added later) */}
        </div>
      );
    case 'calendar':
      return (
        <div style={{ position: 'relative', height: 170 }}>
          <div style={{
            position: 'absolute', right: 0, bottom: 0,
            width: 180, height: 150, borderRadius: 16,
            background: '#fff', boxShadow: '0 10px 24px rgba(0,0,0,0.06)',
            padding: 14,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, fontWeight: 700, color: T2, marginBottom: 10 }}>
              <span>APR</span><span>2026</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
              {Array.from({ length: 21 }).map((_, i) => (
                <div key={i} style={{
                  aspectRatio: '1', borderRadius: 4,
                  background: i === 10 ? MINT : i === 15 ? ORANGE : 'rgba(0,0,0,0.05)',
                  fontSize: 8, fontWeight: 590, color: i === 15 ? '#fff' : TEXT,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>{i + 1}</div>
              ))}
            </div>
          </div>
          {/* Overdue pill */}
          <div style={{
            position: 'absolute', left: 0, top: 6,
            background: '#fff', borderRadius: 999,
            padding: '6px 10px', fontSize: 11, fontWeight: 590,
            color: ORANGE, boxShadow: '0 4px 12px rgba(0,0,0,0.06)',
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: ORANGE }}/>
            Overdue by 5 days
          </div>
        </div>
      );
    case 'asky':
      return (
        <div style={{ position: 'relative', height: 170 }}>
          {/* Asky circle */}
          <div style={{
            position: 'absolute', left: '50%', top: 10,
            transform: 'translateX(-50%)',
            width: 72, height: 72, borderRadius: '50%',
            background: `radial-gradient(circle at 30% 30%, #fff, ${MINT} 70%)`,
            border: `3px solid ${MINT_STROKE}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 10px 24px rgba(0,0,0,0.1)',
          }}>
            <Icon name="sparkles" size={32} color={DEEP_MINT}/>
          </div>
          {/* Bubble */}
          <div style={{
            position: 'absolute', left: 10, bottom: 0,
            background: '#fff', borderRadius: 16,
            borderBottomLeftRadius: 6,
            padding: '8px 12px', fontSize: 11, color: TEXT,
            lineHeight: 1.35, maxWidth: 180,
            boxShadow: '0 6px 18px rgba(0,0,0,0.06)',
          }}>
            Usually fine — I’ll watch with you for 24 h.
          </div>
        </div>
      );
    case 'vaccine':
      return (
        <div style={{ position: 'relative', height: 170, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', paddingBottom: 6 }}>
          <div style={{
            width: 120, height: 140, borderRadius: 20,
            background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 10px 24px rgba(0,0,0,0.06)',
          }}>
            <Icon name="star-shield" size={72} color={ORANGE}/>
          </div>
          <div style={{
            position: 'absolute', top: 8, right: 10,
            background: MINT, border: `2px solid ${MINT_STROKE}`,
            borderRadius: 999, padding: '4px 10px',
            fontSize: 11, fontWeight: 700, color: TEXT,
          }}>
            Up to date
          </div>
        </div>
      );
    case 'qr':
      return (
        <div style={{ position: 'relative', height: 170, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', paddingBottom: 6 }}>
          <div style={{
            width: 130, height: 130,
            background: '#fff', borderRadius: 20,
            padding: 14, display: 'grid',
            gridTemplateColumns: 'repeat(8, 1fr)', gap: 2,
            boxShadow: '0 10px 24px rgba(0,0,0,0.06)',
          }}>
            {Array.from({ length: 64 }).map((_, i) => {
              // Pseudo-random QR: fixed seed for stability
              const on = (i * 37 + 11) % 7 < 3;
              return <div key={i} style={{
                background: on ? TEXT : 'transparent',
                borderRadius: 1,
              }}/>;
            })}
          </div>
          <div style={{
            position: 'absolute', top: 12, left: 14,
            width: 36, height: 36, borderRadius: '50%',
            background: ORANGE, color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 6px 14px rgba(255,138,61,0.4)',
          }}>
            <Icon name="paw" size={18} color="#fff"/>
          </div>
        </div>
      );
    case 'avatar':
      return (
        <div style={{ position: 'relative', height: 170, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
          <div style={{
            width: 160, height: 160, borderRadius: '50%',
            background: `radial-gradient(circle at 35% 30%, #fff, ${MINT} 55%, ${DEEP_MINT} 100%)`,
            display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
            overflow: 'hidden',
            boxShadow: '0 10px 24px rgba(31,185,167,0.2)',
          }}>
            <div style={{ transform: 'scale(1.0) translateY(14px)' }}>
              <DogIllustration variant="golden" size={150}/>
            </div>
          </div>
        </div>
      );
    case 'devices':
      return (
        <div style={{ position: 'relative', height: 170, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', gap: 10 }}>
          {/* Watch */}
          <div style={{
            width: 48, height: 68, borderRadius: 12,
            background: '#fff', boxShadow: '0 6px 16px rgba(0,0,0,0.06)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name="heart" size={22} color={ORANGE}/>
          </div>
          {/* Phone */}
          <div style={{
            width: 86, height: 150, borderRadius: 18,
            background: '#fff', padding: 8,
            boxShadow: '0 10px 24px rgba(0,0,0,0.08)',
            display: 'flex', flexDirection: 'column', gap: 4,
          }}>
            <div style={{ height: 32, borderRadius: 10, background: MINT }}/>
            <div style={{ height: 20, borderRadius: 6, background: 'rgba(0,0,0,0.06)' }}/>
            <div style={{ height: 20, borderRadius: 6, background: 'rgba(0,0,0,0.06)' }}/>
            <div style={{ height: 20, borderRadius: 6, background: 'rgba(0,0,0,0.06)' }}/>
          </div>
        </div>
      );
    default:
      return null;
  }
}

// ─── Social bar ──────────────────────────────────────────
function SocialBar() {
  return (
    <section style={{ padding: '48px 0', background: '#fff', borderTop: '1px solid rgba(0,0,0,0.04)' }}>
      <div className="p-wrap">
        <Reveal>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 13, fontWeight: 590, color: T2, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
              Built on the Apple design language
            </span>
            <div style={{ display: 'flex', gap: 40, alignItems: 'center', color: T2, fontSize: 14, fontWeight: 510, flexWrap: 'wrap' }}>
              <Badge>iOS 26 Liquid Glass</Badge>
              <Badge>iPhone 17 Pro</Badge>
              <Badge>SF Pro · SF Symbols</Badge>
              <Badge>English-first</Badge>
              <Badge>Light theme only</Badge>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}
function Badge({ children }) {
  return <span style={{ color: TEXT, opacity: 0.7 }}>{children}</span>;
}

// ─── How it works ────────────────────────────────────────
function HowItWorks() {
  const steps = [
    {
      n: '01',
      title: 'Add your dog',
      body: 'Name, breed, color, date of birth, a photo. A calm 9-step onboarding that takes minutes and fits on one thumb.',
      icon: 'profile',
    },
    {
      n: '02',
      title: 'Get a personalized plan',
      body: 'Vaccinations, grooming, weight tracking and milestones — scheduled around your specific dog. Nothing generic.',
      icon: 'calendar',
    },
    {
      n: '03',
      title: 'Ask Asky anything',
      body: 'Calm, safe guidance for confusing moments. Asky never diagnoses — she helps you understand, and escalates to a vet when it matters.',
      icon: 'sparkles',
    },
  ];
  return (
    <Section id="how" bg="#fff">
      <Reveal>
        <p className="p-eyebrow">How it works</p>
        <h2 className="p-h2">Three calm steps.<br/>Then Puffy is quietly there.</h2>
        <p className="p-lede" style={{ marginBottom: 56 }}>
          Puffy takes the mental load off. Instead of five apps and a WhatsApp group with your vet, you have one space that knows your dog.
        </p>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
        {steps.map((s, i) => (
          <Reveal key={s.n} delay={i * 120}>
            <div className="p-card" style={{ height: '100%', padding: 32, display: 'flex', flexDirection: 'column', minHeight: 300 }}>
              <div style={{
                width: 52, height: 52, borderRadius: 16,
                background: MINT, border: `2px solid ${MINT_STROKE}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 24,
              }}>
                <Icon name={s.icon} size={24} color={TEXT} weight={2}/>
              </div>
              <span style={{ fontSize: 12, fontWeight: 590, color: TEAL, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>Step {s.n}</span>
              <h3 className="p-h3">{s.title}</h3>
              <p style={{ fontSize: 16, color: TEXT, opacity: 0.7, lineHeight: 1.5, margin: 0 }}>{s.body}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

// ─── Feature glance ──────────────────────────────────────
function FeatureGlance() {
  const features = [
    { title: 'Digital pet passport', body: 'All of your dog\u2019s essentials — breed, weight, microchip, vet — in one calm card.', icon: 'qrcode' },
    { title: 'Care calendar', body: 'Vaccinations, grooming, heartworm. Timely reminders, never alarming ones.', icon: 'calendar' },
    { title: 'Asky AI', body: 'A vet-informed companion. Helps you understand and decide, not diagnose.', icon: 'sparkles' },
    { title: '3D avatar', body: 'A personalized 3D model of your dog, generated from a photo.', icon: 'paw' },
  ];
  return (
    <Section bg="#FFFFFF" paw={false}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.2fr)', gap: 64, alignItems: 'center' }}>
        <Reveal>
          <p className="p-eyebrow">Everything in one place</p>
          <h2 className="p-h2">A single, quiet home for everything about your dog.</h2>
          <p className="p-lede" style={{ marginBottom: 32 }}>
            Puffy replaces the stack of apps, notes, screenshots and group chats that dog owners end up with. Not more features — fewer decisions.
          </p>
          <a href="features.html" className="p-btn p-btn--secondary">
            See all features <Icon name="chevron-right" size={14} color="#000" weight={2.5}/>
          </a>
        </Reveal>
        <Reveal delay={120}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {features.map((f, i) => (
              <div key={i} className="p-card" style={{ padding: 28 }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: 'rgba(127,239,227,0.25)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 18,
                }}>
                  <Icon name={f.icon} size={22} color={TEAL} weight={2}/>
                </div>
                <h3 style={{ fontSize: 17, fontWeight: 700, margin: '0 0 6px', letterSpacing: '-0.01em' }}>{f.title}</h3>
                <p style={{ fontSize: 14, color: T2, lineHeight: 1.5, margin: 0 }}>{f.body}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

// ─── Asky showcase ───────────────────────────────────────
function AskyShowcase() {
  return (
    <Section bg="#fff">
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 0.9fr) minmax(0, 1fr)', gap: 64, alignItems: 'center' }}>
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
            <Penguin size={44}/>
            <span style={{ fontSize: 15, fontWeight: 590, color: TEAL, letterSpacing: '-0.2px' }}>Meet Asky</span>
          </div>
          <h2 className="p-h2">Calm guidance, not frightening verdicts.</h2>
          <p className="p-lede" style={{ marginBottom: 28 }}>
            Asky is trained on veterinary content and Puffy\u2019s safety principles. She helps you understand what\u2019s happening with your dog and what to do next — and tells you when to see a vet.
          </p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              ['Never diagnoses.', 'Asky explains and reassures. She recommends a vet visit whenever there\u2019s any uncertainty.'],
              ['Answers in plain English.', 'No jargon, no panic. Like a knowledgeable dog-owner friend.'],
              ['Knows your specific dog.', 'Your breed, age, weight and history shape every answer.'],
            ].map(([h, b], i) => (
              <li key={i} style={{ display: 'flex', gap: 12 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: MINT, marginTop: 10, flexShrink: 0 }}/>
                <span>
                  <strong style={{ fontWeight: 590, color: TEXT }}>{h}</strong>{' '}
                  <span style={{ color: T2 }}>{b}</span>
                </span>
              </li>
            ))}
          </ul>
        </Reveal>

        <Reveal delay={120}>
          <AskyConversationCard/>
        </Reveal>
      </div>
    </Section>
  );
}

function AskyConversationCard() {
  return (
    <div style={{
      background: 'linear-gradient(180deg, rgba(127,239,227,0.25) 0%, rgba(127,239,227,0.08) 100%)',
      borderRadius: 28, padding: 28,
      border: '1px solid rgba(127,239,227,0.4)',
      display: 'flex', flexDirection: 'column', gap: 12,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
        <PetTitlePill name="Asky" status="about Jessica"/>
        <span style={{ marginLeft: 'auto', fontSize: 12, color: T2, fontWeight: 510 }}>3 of 5</span>
      </div>
      {/* user */}
      <div style={{
        alignSelf: 'flex-end', maxWidth: '78%',
        background: MINT, border: `1px solid ${MINT_STROKE}`,
        borderRadius: 20, borderBottomRightRadius: 6,
        padding: '10px 14px', fontSize: 15, color: TEXT,
      }}>
        Jessica skipped dinner and seems sleepy. Should I worry?
      </div>
      {/* asky */}
      <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}>
        <div style={{ width: 28, height: 28, borderRadius: '50%', overflow: 'hidden', flexShrink: 0 }}>
          <Puffy size={28}/>
        </div>
        <div style={{ maxWidth: '78%', ...GLASS, borderRadius: 20, borderBottomLeftRadius: 6, padding: '12px 14px', fontSize: 15, color: TEXT, lineHeight: 1.5 }}>
          A single skipped meal with normal energy is usually fine. If she stays low for more than 24 hours, refuses water, or vomits — we recommend a vet visit.
        </div>
      </div>
      <div style={{ display: 'flex', gap: 8, marginLeft: 36, flexWrap: 'wrap' }}>
        <Chip>Log symptom</Chip>
        <Chip>Find a vet</Chip>
      </div>
      {/* user */}
      <div style={{
        alignSelf: 'flex-end', maxWidth: '78%',
        background: MINT, border: `1px solid ${MINT_STROKE}`,
        borderRadius: 20, borderBottomRightRadius: 6,
        padding: '10px 14px', fontSize: 15, color: TEXT,
      }}>
        How can I check her at home first?
      </div>
      <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}>
        <div style={{ width: 28, height: 28, borderRadius: '50%', overflow: 'hidden', flexShrink: 0 }}>
          <Puffy size={28}/>
        </div>
        <div style={{ maxWidth: '78%', ...GLASS, borderRadius: 20, borderBottomLeftRadius: 6, padding: '12px 14px', fontSize: 15, color: TEXT, lineHeight: 1.5 }}>
          Feel her belly for tension, check her gums for pink color, and offer water in a shallow bowl. I can walk you through each step.
        </div>
      </div>
    </div>
  );
}
function Chip({ children }) {
  return (
    <span style={{
      ...GLASS, borderRadius: 999, padding: '6px 12px',
      fontSize: 13, fontWeight: 510, color: TEAL,
    }}>{children}</span>
  );
}

// ─── Testimonials ────────────────────────────────────────
function Testimonials() {
  const items = [
    {
      quote: 'I used to panic-google every little thing. Puffy gave me a calm second opinion — and told me when the second opinion needed to be a real vet.',
      name: 'Maya T.',
      dog: 'Border Collie · 3 yrs',
      variant: 'black',
    },
    {
      quote: 'The passport alone replaces three Notes app files and a folder of screenshots. And it\u2019s actually nice to look at.',
      name: 'Daniel R.',
      dog: 'Welsh Corgi · 6 mo',
      variant: 'corgi',
    },
    {
      quote: 'Asky explained what the discharge paper from the vet actually meant. It\u2019s the first app that feels like a friend, not a product.',
      name: 'Priya S.',
      dog: 'Golden Retriever · 2 yrs',
      variant: 'golden',
    },
  ];
  return (
    <Section bg="#F7F7F5">
      <Reveal>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 48, gap: 24, flexWrap: 'wrap' }}>
          <div>
            <p className="p-eyebrow">Early testers</p>
            <h2 className="p-h2" style={{ marginBottom: 0 }}>What dog owners are saying.</h2>
          </div>
          <p className="p-muted" style={{ fontSize: 14, maxWidth: 300, textAlign: 'right' }}>
            Placeholder quotes from our private beta, for the purposes of this preview.
          </p>
        </div>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
        {items.map((t, i) => (
          <Reveal key={i} delay={i * 120}>
            <div className="p-card" style={{ padding: 28, height: '100%', display: 'flex', flexDirection: 'column' }}>
              <svg width="28" height="22" viewBox="0 0 28 22" style={{ marginBottom: 18, opacity: 0.35 }}>
                <path d="M0 22V12C0 5.4 3.9 0 10 0v4C6.1 4 4 6.7 4 12h6v10H0zm16 0V12C16 5.4 19.9 0 26 0v4c-3.9 0-6 2.7-6 8h6v10H16z" fill={TEAL}/>
              </svg>
              <p style={{ fontSize: 17, lineHeight: 1.5, color: TEXT, margin: '0 0 24px', flex: 1, letterSpacing: '-0.01em' }}>
                {t.quote}
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, borderTop: '1px solid rgba(0,0,0,0.06)', paddingTop: 18 }}>
                <div style={{ width: 44, height: 44, borderRadius: '50%', background: '#F2F2F7', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <div style={{ transform: 'scale(0.7)' }}>
                    <DogIllustration variant={t.variant} size={80}/>
                  </div>
                </div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 590, color: TEXT }}>{t.name}</div>
                  <div style={{ fontSize: 13, color: T2 }}>{t.dog}</div>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

// ─── FAQ (matches JSON-LD FAQPage in home.html) ──────────
function FaqSection() {
  const faqs = [
    {
      q: 'What is Puffy?',
      a: 'Puffy is an iOS app for dog owners. It keeps a digital pet passport, a vaccination and care calendar, and gives you Asky — an AI companion that helps you understand what is happening with your dog and decide when to see a vet.',
    },
    {
      q: 'Is Puffy a replacement for a vet?',
      a: 'No. Puffy helps you understand and decide. Whenever there is uncertainty, Asky recommends a vet visit. It is built specifically to avoid diagnosing.',
    },
    {
      q: 'Is Puffy free?',
      a: 'The passport, care calendar and 3D avatar are free. Asky AI gives you 5 free questions per week. Puffy Plus unlocks unlimited Asky for around 5 to 10 dollars a month.',
    },
    {
      q: 'Which devices does Puffy support?',
      a: 'Puffy is iOS-first, targeting iPhone 17 Pro and newer, English-language, light theme. Android is not on the current roadmap.',
    },
    {
      q: 'When will Puffy be available?',
      a: 'Puffy is in a private beta. Join the waitlist on this page and we will invite you in as your region opens up.',
    },
    {
      q: 'Does Puffy sell my data?',
      a: 'No. Puffy is not ad-supported and does not sell user data. See our Privacy page for the full statement.',
    },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <Section bg="#fff">
      <Reveal>
        <p className="p-eyebrow">Common questions</p>
        <h2 className="p-h2" style={{ marginBottom: 12 }}>Quick answers.</h2>
        <p className="p-lede" style={{ marginBottom: 48 }}>
          A few things people usually ask before joining the waitlist. More on the <a href="faq.html" style={{ color: TEAL, textDecoration: 'none', fontWeight: 590 }}>FAQ page</a>.
        </p>
      </Reveal>
      <div style={{ display: 'grid', gap: 12, maxWidth: 820, margin: '0 auto' }}>
        {faqs.map((f, i) => {
          const isOpen = open === i;
          return (
            <Reveal key={i} delay={i * 60}>
              <details
                open={isOpen}
                onToggle={(e) => e.currentTarget.open && setOpen(i)}
                style={{
                  background: '#fff',
                  border: '1px solid rgba(0,0,0,0.08)',
                  borderRadius: 20,
                  padding: '18px 22px',
                  transition: 'box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1)',
                  boxShadow: isOpen ? '0 2px 12px rgba(0,0,0,0.06)' : 'none',
                }}
              >
                <summary style={{
                  listStyle: 'none', cursor: 'pointer',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
                  fontSize: 17, fontWeight: 590, color: TEXT, letterSpacing: '-0.01em',
                }}>
                  <span>{f.q}</span>
                  <span style={{
                    flexShrink: 0, width: 28, height: 28, borderRadius: '50%',
                    background: isOpen ? MINT : 'rgba(0,0,0,0.04)',
                    border: isOpen ? `1px solid ${MINT_STROKE}` : 'none',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    transition: 'all 300ms cubic-bezier(0.22, 1, 0.36, 1)',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                  }}>
                    <svg width="10" height="10" viewBox="0 0 10 10">
                      <path d="M5 0v10M0 5h10" stroke={TEXT} strokeWidth="1.5" strokeLinecap="round"/>
                    </svg>
                  </span>
                </summary>
                <p style={{ margin: '14px 0 0', fontSize: 16, lineHeight: 1.55, color: T2 }}>
                  {f.a}
                </p>
              </details>
            </Reveal>
          );
        })}
      </div>
    </Section>
  );
}

// ─── Final CTA ───────────────────────────────────────────
const FinalCta = () => (
  <WaitlistCta
    tone="white"
    lede={'We\u2019re opening the first round of testers in the coming weeks. Leave your email and we\u2019ll invite you in.'}
    note="iOS-first. iPhone 17 Pro and newer. English."
  />
);

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