/* global React, PuffyKit, PuffySite */
// Shared feature-landing layout — used by passport.jsx, asky.jsx, life.jsx,
// avatar.jsx, home-screen.jsx, multipet.jsx. Keeps every feature page visually
// coherent: dense hero with a "demo slot" on the right, a 3-step "how it works"
// row, a "details" grid, a cross-links strip, and the same FinalCta.

const { MINT, MINT_STROKE, TEAL, TEXT, T2, T3, GLASS, Icon } = window.PuffyKit;
const { Nav, Footer, Waitlist, WaitlistCta, Reveal, Section, PawMark, Penguin } = window.PuffySite;

// ─── Hero ──────────────────────────────────────────────
function FeatureHero({ eyebrow, title, lede, tint = '#F5EFE6', demo, pillText }) {
  return (
    <section style={{
      background: tint,
      padding: '72px 0 96px',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div className="p-wrap">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
          gap: 48, alignItems: 'center',
        }}>
          <Reveal>
            {pillText && (
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                background: '#fff', borderRadius: 999,
                padding: '8px 14px',
                fontSize: 13, fontWeight: 590, color: TEAL,
                border: `1px solid ${MINT_STROKE}`,
                marginBottom: 18,
              }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: TEAL }}/>
                {pillText}
              </div>
            )}
            <p className="p-eyebrow" style={{ margin: 0, marginBottom: 14 }}>{eyebrow}</p>
            <h1 className="p-h1" style={{ marginBottom: 20, textWrap: 'balance' }}>{title}</h1>
            <p className="p-lede" style={{ marginBottom: 28 }}>{lede}</p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="get-access.html" className="p-btn p-btn--primary">Join the waitlist</a>
              <a href="features.html" className="p-btn p-btn--ghost" style={{ background: 'rgba(255,255,255,0.6)', height: 54, padding: '0 20px' }}>
                All features <Icon name="chevron-right" size={14} color="#000" weight={2.5}/>
              </a>
            </div>
          </Reveal>
          <Reveal delay={150}>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              {demo}
            </div>
          </Reveal>
        </div>
      </div>
      <div style={{ position: 'absolute', top: 20, right: -10, opacity: 0.06 }}>
        <PawMark size={180} color="#000"/>
      </div>
    </section>
  );
}

// ─── How it works ──────────────────────────────────────
function HowThreeSteps({ steps, eyebrow = 'How it works' }) {
  return (
    <Section bg="#fff">
      <Reveal>
        <p className="p-eyebrow">{eyebrow}</p>
        <h2 className="p-h2" style={{ marginBottom: 48 }}>Three quiet steps.</h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 20 }}>
        {steps.map((s, i) => (
          <Reveal key={i} delay={i * 100}>
            <div className="p-card" style={{ padding: 28, height: '100%' }}>
              <div style={{
                fontFamily: 'var(--puffy-font-mono)', fontSize: 12,
                fontWeight: 590, color: TEAL, letterSpacing: '0.08em', marginBottom: 16,
              }}>
                STEP 0{i + 1}
              </div>
              <h3 className="p-h3" style={{ marginBottom: 10 }}>{s.title}</h3>
              <p style={{ fontSize: 15, color: T2, lineHeight: 1.55, margin: 0 }}>{s.body}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

// ─── Details grid ──────────────────────────────────────
function DetailsGrid({ eyebrow = 'What\u2019s inside', title, items }) {
  return (
    <Section bg="#F7F7F5">
      <Reveal>
        <p className="p-eyebrow">{eyebrow}</p>
        <h2 className="p-h2" style={{ marginBottom: 40 }}>{title}</h2>
      </Reveal>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
        gap: 1, background: 'rgba(0,0,0,0.06)',
        borderRadius: 20, overflow: 'hidden',
      }}>
        {items.map((it, i) => (
          <div key={i} style={{ background: '#fff', padding: 28 }}>
            <div style={{
              width: 38, height: 38, borderRadius: 10,
              background: MINT, border: `1.5px solid ${MINT_STROKE}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 14,
            }}>
              <Icon name={it.icon || 'paw'} size={18} color={TEXT} weight={2}/>
            </div>
            <h3 style={{ fontSize: 17, fontWeight: 700, margin: '0 0 6px', letterSpacing: '-0.01em' }}>{it.title}</h3>
            <p style={{ fontSize: 14, color: T2, lineHeight: 1.5, margin: 0 }}>{it.body}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ─── Quote strip ───────────────────────────────────────
function QuoteStrip({ quote, by }) {
  return (
    <Section bg="#fff">
      <Reveal>
        <div style={{
          maxWidth: 860, margin: '0 auto', textAlign: 'center',
        }}>
          <svg width="32" height="24" viewBox="0 0 28 22" style={{ opacity: 0.35, marginBottom: 20 }}>
            <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: 'clamp(22px, 2.4vw, 30px)',
            fontWeight: 510, lineHeight: 1.35,
            letterSpacing: '-0.015em', color: TEXT,
            margin: '0 0 18px', textWrap: 'balance',
          }}>
            {quote}
          </p>
          <p style={{ fontSize: 14, color: T2, margin: 0 }}>{by}</p>
        </div>
      </Reveal>
    </Section>
  );
}

// ─── Cross-links strip ────────────────────────────────
// Other feature pages to click through to. Pass the current page id to omit it.
const ALL_LINKS = [
  { id: 'passport',   label: 'Pet passport',     href: 'feature-passport.html',   tint: '#D7F6F1' },
  { id: 'asky',       label: 'Asky AI',          href: 'feature-asky.html',       tint: '#DCE9F9' },
  { id: 'life',       label: 'Care calendar',    href: 'feature-life.html',       tint: '#F6EFDD' },
  { id: 'avatar',     label: '3D avatar',        href: 'feature-avatar.html',     tint: '#E4DDF5' },
  { id: 'home',       label: 'Home screen',      href: 'feature-home.html',       tint: '#FAE1D0' },
  { id: 'multipet',   label: 'Multi-pet',        href: 'feature-multipet.html',   tint: '#D7F6F1' },
];

function CrossLinks({ current }) {
  const others = ALL_LINKS.filter((l) => l.id !== current);
  return (
    <Section bg="#fff">
      <Reveal>
        <p className="p-eyebrow">Keep exploring</p>
        <h2 className="p-h2" style={{ marginBottom: 32 }}>Other quiet surfaces.</h2>
      </Reveal>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
        gap: 12,
      }}>
        {others.map((l, i) => (
          <Reveal key={l.id} delay={i * 60}>
            <a href={l.href} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              gap: 12, padding: '22px 22px',
              background: l.tint, borderRadius: 20,
              transition: 'transform 200ms var(--puffy-ease)',
            }}
            onMouseOver={(e) => e.currentTarget.style.transform = 'translateY(-2px)'}
            onMouseOut={(e) => e.currentTarget.style.transform = 'none'}>
              <span style={{ fontSize: 16, fontWeight: 590, color: TEXT, letterSpacing: '-0.01em' }}>
                {l.label}
              </span>
              <span style={{
                width: 32, height: 32, borderRadius: '50%',
                background: '#fff',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name="chevron-right" size={14} color={TEXT} weight={2.5}/>
              </span>
            </a>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

// ─── Final CTA ────────────────────────────────────────
function FinalCta({ text = 'Get early access to Puffy.' }) {
  return <WaitlistCta title={text} tone="mint" compact/>;
}

// ─── Feature page shell ───────────────────────────────
function FeaturePage({ navId = 'features', current, hero, steps, details, quote, children }) {
  return (
    <>
      <Nav active={navId}/>
      <FeatureHero {...hero}/>
      {children /* optional inline demo / extra section between hero and how */}
      {steps && <HowThreeSteps steps={steps}/>}
      {details && <DetailsGrid {...details}/>}
      {quote && <QuoteStrip {...quote}/>}
      <CrossLinks current={current}/>
      <FinalCta/>
      <Footer/>
    </>
  );
}

Object.assign(window, {
  PuffyFeature: {
    FeaturePage, FeatureHero, HowThreeSteps, DetailsGrid, QuoteStrip,
    CrossLinks, FinalCta,
  },
});