/* global React, ReactDOM, PuffyKit, PuffySite, PuffyFeature */
// Feature landing — Care Calendar (Life).

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

const ORANGE = '#FF8A3D';
const ORANGE_SOFT = '#FAE1D0';

function CalendarDemo() {
  const tabs = ['Health', 'Routine', 'Development', 'Training'];
  const items = [
    { tint: ORANGE_SOFT, pill: 'Overdue by 5 days', pillColor: ORANGE, title: 'Rabies booster', meta: 'Last dose · Apr 2025' },
    { tint: '#E8F6EF', pill: 'Due in 12 days',     pillColor: '#1FA06B', title: 'Grooming',       meta: 'Every 6 weeks' },
    { tint: '#F0F4FB', pill: 'Active',             pillColor: '#3A73D9', title: 'Heartworm',      meta: 'Monthly · 18 left' },
  ];
  return (
    <div style={{
      width: 360, padding: 22, borderRadius: 28,
      background: '#fff',
      boxShadow: '0 30px 60px rgba(0,0,0,0.1)',
    }}>
      {/* Tabs */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 18, borderBottom: '1px solid rgba(0,0,0,0.06)', paddingBottom: 12 }}>
        {tabs.map((t, i) => (
          <span key={t} style={{
            fontSize: 13, fontWeight: 590,
            padding: '6px 10px', borderRadius: 10,
            background: i === 0 ? MINT : 'transparent',
            color: i === 0 ? TEXT : T2,
            border: i === 0 ? `1px solid ${MINT_STROKE}` : 'none',
          }}>{t}</span>
        ))}
      </div>
      {/* Items */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it, i) => (
          <div key={i} style={{
            padding: 14, borderRadius: 16,
            background: it.tint,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
              <div style={{ fontSize: 15, fontWeight: 700, color: TEXT, letterSpacing: '-0.01em' }}>{it.title}</div>
              <span style={{ fontSize: 10, fontWeight: 590, color: it.pillColor, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{it.pill}</span>
            </div>
            <div style={{ fontSize: 12, color: T2, marginBottom: 10 }}>{it.meta}</div>
            <div style={{ display: 'flex', gap: 6 }}>
              <span style={{ fontSize: 11, fontWeight: 510, padding: '5px 10px', borderRadius: 999, background: '#fff', color: TEXT }}>Mark done</span>
              <span style={{ fontSize: 11, fontWeight: 510, padding: '5px 10px', borderRadius: 999, background: '#fff', color: TEAL }}>Ask Asky</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function App() {
  return (
    <FeaturePage
      current="life"
      hero={{
        eyebrow: 'Care calendar',
        pillText: 'No alarming language — ever',
        title: 'A plan that knows what your dog needs next.',
        lede: 'Four quiet tabs — Health, Routine, Development, Training. Every item carries an Ask Asky button, so guidance is always one tap away.',
        tint: '#FBF7EE',
        demo: <CalendarDemo/>,
      }}
      steps={[
        { title: 'Tell us your dog', body: 'Breed, age, weight. Puffy builds a schedule around your specific dog — not a generic one.' },
        { title: 'Follow gentle nudges', body: 'Vaccinations, grooming, heartworm, deworming. Reminders that read "Overdue by 5 days", not "URGENT".' },
        { title: 'Ask in context', body: 'Tap Ask Asky on any item to understand what it is, when to skip, and what to tell the vet.' },
      ]}
      details={{
        title: 'What the calendar tracks.',
        items: [
          { icon: 'star-shield', title: 'Vaccinations',      body: 'Breed-aware schedule for Rabies, DHPP, Bordetella, Lepto.' },
          { icon: 'calendar',    title: 'Grooming cycles',   body: 'Coat-aware intervals for bathing, trimming and nails.' },
          { icon: 'heart',       title: 'Weight & body',     body: 'Log weight monthly — see trend and get range guidance.' },
          { icon: 'chip',        title: 'Parasite prevention', body: 'Monthly heartworm, tick, flea — with dose counters.' },
          { icon: 'paw',         title: 'Development',       body: 'Teething, socialisation, neutering decisions, senior care.' },
          { icon: 'sparkles',    title: 'Ask Asky on any item', body: 'Every row has a contextual Asky button — no copy-paste.' },
        ],
      }}
      quote={{
        quote: 'It tells me "overdue by 5 days" and that is it. No red bells, no "URGENT". I actually open the app because of it.',
        by: 'Priya S. · Golden Retriever, 2 yrs',
      }}
    />
  );
}

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