/* global React, ReactDOM, PuffyKit, PuffySite, PuffyFeature */
// Feature landing — Pet Passport.

const { MINT, MINT_STROKE, TEAL, TEXT, T2, T3, Icon } = window.PuffyKit;
const { PawMark } = window.PuffySite;
const { FeaturePage } = window.PuffyFeature;

// ─── Demo: the passport card ─────────────────────────
function PassportDemo() {
  return (
    <div style={{ position: 'relative', width: 360, height: 420 }}>
      {/* Soft mint card with paw pattern */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(160deg, #E8FBF6 0%, #C2F0E8 100%)',
        border: `2px solid ${MINT_STROKE}`,
        borderRadius: 32,
        boxShadow: '0 30px 60px rgba(0,0,0,0.1)',
        padding: 28,
        overflow: 'hidden',
      }}>
        {/* Paw-pattern background */}
        <div aria-hidden style={{ position: 'absolute', inset: 0, opacity: 0.12, pointerEvents: 'none' }}>
          {Array.from({ length: 12 }).map((_, i) => (
            <div key={i} style={{
              position: 'absolute',
              left: `${(i * 73) % 100}%`,
              top: `${(i * 41) % 100}%`,
              transform: `rotate(${(i * 37) % 180}deg)`,
            }}>
              <PawMark size={32} color="#1FB9A7"/>
            </div>
          ))}
        </div>
        {/* Header */}
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
          <div style={{ fontFamily: 'var(--puffy-font-mono)', fontSize: 10, fontWeight: 590, color: TEAL, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Pet passport</div>
          <div style={{
            width: 44, height: 44, borderRadius: 10,
            background: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 4px 12px rgba(0,0,0,0.06)',
          }}>
            <Icon name="qrcode" size={22} color={TEXT} weight={1.8}/>
          </div>
        </div>
        {/* Avatar */}
        <div style={{ position: 'relative', display: 'flex', gap: 14, alignItems: 'center', marginBottom: 22 }}>
          <div style={{
            width: 72, height: 72, borderRadius: '50%',
            background: `radial-gradient(circle at 30% 30%, #fff, ${MINT} 70%)`,
            border: `2px solid ${MINT_STROKE}`,
          }}/>
          <div>
            <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em', color: TEXT }}>Jessica</div>
            <div style={{ fontSize: 13, color: T2 }}>Golden Retriever · 2 years</div>
          </div>
        </div>
        {/* Info rows */}
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 18 }}>
          {[
            ['Weight', '24 kg'],
            ['Diet', 'Dry food'],
            ['Neutered', 'Yes'],
            ['Microchip', '981 · · 4421'],
          ].map(([k, v]) => (
            <div key={k} style={{
              background: 'rgba(255,255,255,0.7)',
              borderRadius: 12, padding: '10px 12px',
            }}>
              <div style={{ fontSize: 10, fontWeight: 590, color: T3, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{k}</div>
              <div style={{ fontSize: 14, fontWeight: 590, color: TEXT, marginTop: 2 }}>{v}</div>
            </div>
          ))}
        </div>
        {/* Vaccines strip */}
        <div style={{ position: 'relative' }}>
          <div style={{ fontSize: 11, fontWeight: 590, color: T3, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>Vaccines</div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {['Rabies', 'DHPP', 'Bordetella', 'Lepto'].map((v, i) => (
              <span key={v} style={{
                fontSize: 11, fontWeight: 590,
                background: i === 3 ? '#FAE1D0' : '#fff',
                color: i === 3 ? '#C25A1D' : TEXT,
                borderRadius: 999, padding: '5px 10px',
              }}>
                {i === 3 && <span style={{ width: 6, height: 6, background: '#FF8A3D', borderRadius: '50%', display: 'inline-block', marginRight: 6 }}/>}
                {v}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function App() {
  return (
    <FeaturePage
      current="passport"
      hero={{
        eyebrow: 'Pet passport',
        pillText: 'Core feature · free forever',
        title: 'Every detail about your dog, in one calm card.',
        lede: 'A living profile — breed, weight, microchip, vet, vaccinations, habits. Share it instantly via QR at the vet or a new sitter.',
        tint: '#F0FAF7',
        demo: <PassportDemo/>,
      }}
      steps={[
        { title: 'Add your dog once', body: 'Name, breed, DOB, a photo. Puffy reads the photo to guess breed and color — you just confirm.' },
        { title: 'Drop in the paperwork', body: 'Vaccination cards, lab results, vet visits, insurance. Photos or PDFs — searchable, never lost.' },
        { title: 'Share by QR', body: 'The vet, a sitter, a groomer — one scan shows exactly what they need. You stay in control.' },
      ]}
      details={{
        title: 'What the passport holds.',
        items: [
          { icon: 'profile',     title: 'Identity',        body: 'Name, sex, breed, date of birth, color, microchip, vet contact.' },
          { icon: 'heart',       title: 'Body & diet',     body: 'Weight over time, neuter status, food type, allergies.' },
          { icon: 'star-shield', title: 'Vaccinations',    body: 'Rabies, DHPP, Bordetella, Lepto and more — with dates and files.' },
          { icon: 'record',      title: 'Medical records', body: 'Vet visit summaries, lab results, prescriptions, insurance.' },
          { icon: 'paw',         title: 'Traits & habits', body: 'Temperament, fears, daily routine, behavioural notes.' },
          { icon: 'qrcode',      title: 'Shareable QR',    body: 'A scannable tag at the vet or the sitter. You pick what is visible.' },
        ],
      }}
      quote={{
        quote: 'The passport alone replaces three Notes files and a folder of screenshots. And it is actually nice to look at.',
        by: 'Daniel R. · Welsh Corgi, 6 mo',
      }}
    />
  );
}

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