/* global React, ReactDOM, PuffyKit, PuffySite, PuffyFeature */
// Feature landing — Asky AI.

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

function AskyDemo() {
  return (
    <div style={{
      width: 360, padding: 20, borderRadius: 28,
      background: 'linear-gradient(180deg, rgba(127,239,227,0.3) 0%, rgba(127,239,227,0.08) 100%)',
      border: '1px solid rgba(127,239,227,0.4)',
      boxShadow: '0 30px 60px rgba(0,0,0,0.08)',
      display: 'flex', flexDirection: 'column', gap: 12,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <Penguin size={36}/>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, color: TEXT }}>Asky</div>
          <div style={{ fontSize: 11, color: T2 }}>about Jessica · Golden, 2 yrs</div>
        </div>
        <span style={{ marginLeft: 'auto', fontSize: 11, color: T2, fontWeight: 510 }}>3 of 5</span>
      </div>

      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 4 }}>
        {['Routine', 'Unusual', 'Worried', 'Emergency'].map((c, i) => (
          <span key={c} style={{
            fontSize: 11, fontWeight: 510, padding: '5px 10px',
            borderRadius: 999,
            background: i === 2 ? MINT : '#fff',
            border: i === 2 ? `1px solid ${MINT_STROKE}` : '1px solid rgba(0,0,0,0.08)',
            color: TEXT,
          }}>{c}</span>
        ))}
      </div>

      <div style={{
        alignSelf: 'flex-end', maxWidth: '82%',
        background: MINT, border: `1px solid ${MINT_STROKE}`,
        borderRadius: 18, borderBottomRightRadius: 6,
        padding: '10px 13px', fontSize: 14, color: TEXT,
      }}>
        Jessica skipped dinner and seems sleepy. Should I worry?
      </div>

      <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}>
        <div style={{ width: 26, height: 26, borderRadius: '50%', overflow: 'hidden', flexShrink: 0 }}>
          <Puffy size={26}/>
        </div>
        <div style={{ maxWidth: '82%', background: '#fff', borderRadius: 18, borderBottomLeftRadius: 6, padding: '10px 13px', fontSize: 14, color: TEXT, lineHeight: 1.45, boxShadow: '0 2px 8px rgba(0,0,0,0.04)' }}>
          A skipped meal with normal energy is usually fine. If she stays low for 24 h, refuses water or vomits — we recommend a vet visit.
        </div>
      </div>

      <div style={{ display: 'flex', gap: 6, marginLeft: 34 }}>
        <span style={{ fontSize: 11, fontWeight: 510, padding: '5px 10px', borderRadius: 999, background: '#fff', color: TEAL }}>Log symptom</span>
        <span style={{ fontSize: 11, fontWeight: 510, padding: '5px 10px', borderRadius: 999, background: '#fff', color: TEAL }}>Find a vet</span>
      </div>
    </div>
  );
}

function App() {
  return (
    <FeaturePage
      current="asky"
      hero={{
        eyebrow: 'Asky AI',
        pillText: 'Never diagnoses — always escalates when needed',
        title: 'Calm guidance, never a frightening verdict.',
        lede: 'Asky is trained on veterinary content and Puffy\u2019s safety principles. She helps you understand and decide — and recommends a vet whenever there is real uncertainty.',
        tint: '#ECF3FC',
        demo: <AskyDemo/>,
      }}
      steps={[
        { title: 'Pick the chip that fits', body: 'Routine, unusual, worried, emergency. Four canonical entry points instead of a blank chat box.' },
        { title: 'Asky asks a few things', body: 'Short, specific follow-ups shaped by your dog\u2019s breed, age and history.' },
        { title: 'Act or escalate', body: 'A plain-English next step, a symptom log, or a clear push to see a vet now.' },
      ]}
      details={{
        title: 'How Asky stays safe.',
        items: [
          { icon: 'sparkles',    title: 'Never diagnoses',      body: 'Asky explains and reassures. Diagnosis belongs to a vet.' },
          { icon: 'star-shield', title: 'Escalates on doubt',   body: 'Any red flag — lethargy over 24 h, blood, breathing — we say: see a vet.' },
          { icon: 'profile',     title: 'Breed-aware',          body: 'Answers shaped by your specific dog. No generic internet answer.' },
          { icon: 'chip',        title: 'Vet-informed content', body: 'Trained on reviewed veterinary material — not random scrape.' },
          { icon: 'record',      title: 'Symptom log',          body: 'One tap turns a chat into a tracked note the vet can read later.' },
          { icon: 'heart',       title: 'Calm tone, always',    body: 'No panic, no exclamation marks. A friend who reads textbooks.' },
        ],
      }}
      quote={{
        quote: 'I used to panic-google every little thing. Asky gave me a calm second opinion — and told me when the second opinion needed to be a real vet.',
        by: 'Maya T. · Border Collie, 3 yrs',
      }}
    />
  );
}

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