/* global React, ReactDOM, PuffyKit, PuffySite, PuffyFeature */
// Feature landing — 3D Avatar.

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

const DEEP_MINT = '#1FB9A7';

function AvatarDemo() {
  return (
    <div style={{ position: 'relative', width: 360, height: 420 }}>
      {/* Photo source */}
      <div style={{
        position: 'absolute', left: 0, top: 20,
        width: 140, height: 180, borderRadius: 20,
        background: '#E8E4DC',
        border: '4px solid #fff',
        boxShadow: '0 20px 40px rgba(0,0,0,0.1)',
        transform: 'rotate(-6deg)',
        overflow: 'hidden',
        display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
      }}>
        <DogIllustration variant="golden" size={180}/>
        <div style={{ position: 'absolute', top: 8, left: 8, fontFamily: 'var(--puffy-font-mono)', fontSize: 9, color: '#fff', background: 'rgba(0,0,0,0.5)', padding: '2px 6px', borderRadius: 4 }}>PHOTO</div>
      </div>
      {/* Arrow */}
      <div style={{
        position: 'absolute', left: 152, top: 190,
        fontSize: 22, color: T3,
      }}>→</div>
      {/* 3D model */}
      <div style={{
        position: 'absolute', right: 0, top: 40,
        width: 200, height: 200, borderRadius: '50%',
        background: `radial-gradient(circle at 35% 30%, #fff, ${MINT} 55%, ${DEEP_MINT} 100%)`,
        boxShadow: '0 20px 50px rgba(31,185,167,0.25)',
        display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
        overflow: 'hidden',
      }}>
        <div style={{ transform: 'translateY(16px) scale(1.05)' }}>
          <DogIllustration variant="golden" size={180}/>
        </div>
      </div>
      {/* Spec chips */}
      <div style={{ position: 'absolute', bottom: 10, right: 10, display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end' }}>
        {['Golden · 92%', 'Cream coat', '24 kg est.'].map((x) => (
          <span key={x} style={{
            fontSize: 11, fontWeight: 590,
            background: '#fff', padding: '6px 10px', borderRadius: 999,
            boxShadow: '0 4px 12px rgba(0,0,0,0.06)', color: TEXT,
          }}>{x}</span>
        ))}
      </div>
      {/* Caption */}
      <div style={{
        position: 'absolute', left: 0, bottom: 0,
        fontSize: 13, color: T2, lineHeight: 1.4, maxWidth: 160,
      }}>
        Generated async.<br/>Pushed when ready.
      </div>
    </div>
  );
}

function App() {
  return (
    <FeaturePage
      current="avatar"
      hero={{
        eyebrow: '3D avatar',
        pillText: 'Free · generated from one photo',
        title: 'A personalized 3D model of your dog.',
        lede: 'Snap a photo during onboarding. Puffy generates a soft, low-poly 3D avatar you\u2019ll see across the app. Warm, playful, nothing photoreal.',
        tint: '#F2EEFA',
        demo: <AvatarDemo/>,
      }}
      steps={[
        { title: 'Upload a single photo', body: 'Face-on works best. Any lighting, any background — Puffy handles the rest.' },
        { title: 'Puffy reads & generates', body: 'Breed and color inferred. The model builds asynchronously in the background.' },
        { title: 'A push when it\u2019s ready', body: 'Open the passport — your dog is now there in low-poly 3D. Swap the source photo anytime.' },
      ]}
      details={{
        title: 'Where the avatar lives.',
        items: [
          { icon: 'profile',  title: 'Passport card',   body: 'The 3D avatar headlines your pet passport instead of a flat photo.' },
          { icon: 'qrcode',   title: 'Shareable pet tag', body: 'The same avatar shows on the QR-scan landing page a vet or sitter sees.' },
          { icon: 'sparkles', title: 'Asky chats',      body: 'A small avatar pip sits next to Asky\u2019s replies so you see your dog, not a stock icon.' },
          { icon: 'paw',      title: 'Home status',     body: 'The hero on your home screen — "Jessica is feeling good today" — framed by her 3D portrait.' },
          { icon: 'chip',     title: 'Breed detection', body: 'The same photo detects breed and coat — feeds the schedule and Asky.' },
          { icon: 'heart',    title: 'Ages with her',   body: 'Swap the photo as your dog grows. The avatar keeps up.' },
        ],
      }}
      quote={{
        quote: 'I laughed when the avatar showed up. It looked exactly like my dog, but softer. Weirdly, it made me open the app more.',
        by: 'Sana K. · Beagle, 1 yr',
      }}
    />
  );
}

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