const { Card, Button, Badge, Icon, Divider, Input, Callout, Tag } = window.BowcareDesignSystem_68307b;

const WRAP = { width: '100%', maxWidth: 1120, margin: '0 auto', padding: '0 40px' };

function Eyebrow({ children }) {
  return <p style={{ font: 'var(--text-caption)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--sage-600)', margin: '0 0 12px' }}>{children}</p>;
}

/* --- Hero: headline, one action, and a real product preview (no stock photos bundled) --- */
function Hero({ onGetStarted }) {
  return (
    <section style={{ background: 'var(--paper-0)', borderBottom: '1px solid var(--border-hairline)', padding: '72px 0 80px' }}>
      <div style={{ ...WRAP, display: 'grid', gridTemplateColumns: 'minmax(0,1.05fr) minmax(0,.95fr)', gap: 64, alignItems: 'center' }}>
        <div>
          <Eyebrow>For seniors and the family who help</Eyebrow>
          <h1 style={{ font: 'var(--weight-medium) 56px/1.1 var(--font-serif-display)', letterSpacing: 'var(--tracking-display)', color: 'var(--text-strong)', margin: '0 0 20px' }}>
            Remember what the doctor said.
          </h1>
          <p style={{ font: 'var(--weight-regular) 22px/1.55 var(--font-sans-ui)', color: 'var(--text-muted)', maxWidth: '48ch', margin: '0 0 32px' }}>
            Bowcare keeps every visit in one place — the questions you meant to ask, the notes from the room, and the takeaway in plain words.
          </p>
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
            <Button size="large" onClick={onGetStarted}>Get started free</Button>
            <Button size="large" tone="secondary" icon="printer">See a sample summary</Button>
          </div>
          <p style={{ font: 'var(--text-caption)', color: 'var(--text-subtle)', margin: '20px 0 0' }}>
            No card needed · Works on any phone · Large print by default
          </p>
        </div>
        <Card elevated padding="var(--space-6)">
          <span style={{ font: 'var(--text-caption)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--text-subtle)' }}>
            Tuesday, 12 March
          </span>
          <h2 style={{ font: 'var(--text-title-2)', color: 'var(--text-strong)', margin: '8px 0 4px' }}>Primary care</h2>
          <p style={{ font: 'var(--text-body-lg)', color: 'var(--text-body)', margin: '0 0 16px' }}>Dr. Owen Baptiste</p>
          <Callout tone="note" title="Takeaway">
            The dose of the blood pressure medicine goes up to 10 mg. Recheck in six weeks.
          </Callout>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 20 }}>
            <Badge tone="warn">Dose changed</Badge>
            <Badge tone="go">Shared with Diane</Badge>
          </div>
        </Card>
      </div>
    </section>
  );
}

/* --- Three steps, before / during / after --- */
const STEPS = [
  { icon: 'list-checks', title: 'Before', body: 'Write down what you want to ask. Bowcare shows the list on the day, in large print.' },
  { icon: 'mic', title: 'During', body: 'Tap once to record, or type a line. Notes attach to that visit — no folders to manage.' },
  { icon: 'share-2', title: 'After', body: 'Read the takeaway in plain words, then share it with the person who helps you.' },
];

function HowItWorks() {
  return (
    <section id="how" aria-labelledby="how-h" style={{ padding: '80px 0' }}>
      <div style={WRAP}>
        <Eyebrow>How it works</Eyebrow>
        <h2 id="how-h" style={{ font: 'var(--weight-medium) 40px/1.15 var(--font-serif-display)', color: 'var(--text-strong)', margin: '0 0 40px', maxWidth: '24ch' }}>
          Three moments, one place to put them.
        </h2>
        <ol style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gridTemplateColumns: 'repeat(3,minmax(0,1fr))', gap: 24 }}>
          {STEPS.map((s, i) => (
            <li key={s.title}>
              <Card padding="var(--space-6)" style={{ height: '100%' }}>
                <span style={{ width: 56, height: 56, display: 'grid', placeItems: 'center', borderRadius: '50%', background: 'var(--sage-50)', marginBottom: 20 }}>
                  <Icon name={s.icon} size={28} color="var(--sage-600)" />
                </span>
                <h3 style={{ font: 'var(--text-title-3)', color: 'var(--text-strong)', margin: '0 0 8px' }}>
                  {(i + 1) + '. ' + s.title}
                </h3>
                <p style={{ font: 'var(--text-body-default)', color: 'var(--text-muted)', margin: 0 }}>{s.body}</p>
              </Card>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* --- Audience switch: seniors vs family. Real tabs, arrow-key operable. --- */
const AUDIENCE = {
  senior: {
    label: 'If you go to the visits',
    heading: 'For you, when the visit is yours.',
    points: [
      'You keep your own record — no one has to sit in the room with you.',
      'Your questions are waiting on the screen when the doctor asks if you have any.',
      'One tap records what was said, so you are not writing while listening.',
      'The takeaway is in plain words you can read again at home.',
      'You choose who sees it, and you can stop sharing any time.',
    ],
  },
  family: {
    label: 'If you help someone else',
    heading: 'Know what happened without asking twice.',
    points: [
      'See the takeaway the moment it is saved — read-only by default.',
      'Medication changes are flagged, not buried in a note.',
      'Print a one-page summary for the next specialist.',
      'You never need the login of the person you help.',
    ],
  },
};

function AudienceTabs() {
  const [who, setWho] = React.useState('senior');
  const keys = Object.keys(AUDIENCE);
  const onKey = (e) => {
    const i = keys.indexOf(who);
    if (e.key === 'ArrowRight') setWho(keys[(i + 1) % keys.length]);
    if (e.key === 'ArrowLeft') setWho(keys[(i - 1 + keys.length) % keys.length]);
  };
  const cur = AUDIENCE[who];
  return (
    <section id="who" aria-labelledby="who-h" style={{ background: 'var(--paper-0)', borderTop: '1px solid var(--border-hairline)', borderBottom: '1px solid var(--border-hairline)', padding: '80px 0' }}>
      <div style={WRAP}>
        <h2 id="who-h" style={{ font: 'var(--weight-medium) 40px/1.15 var(--font-serif-display)', color: 'var(--text-strong)', margin: '0 0 28px' }}>
          Built for two people at once.
        </h2>
        <div role="tablist" aria-label="Who are you?" onKeyDown={onKey} style={{ display: 'flex', gap: 12, marginBottom: 32, flexWrap: 'wrap' }}>
          {keys.map((k) => (
            <button key={k} role="tab" id={'tab-' + k} aria-selected={who === k} aria-controls={'panel-' + k}
              tabIndex={who === k ? 0 : -1} onClick={() => setWho(k)}
              style={{
                minHeight: 56, padding: '0 24px', font: 'var(--text-label)', cursor: 'pointer',
                background: who === k ? 'var(--sage-50)' : 'transparent',
                color: who === k ? 'var(--sage-600)' : 'var(--text-body)',
                border: '2px solid ' + (who === k ? 'var(--sage-500)' : 'var(--border-hairline)'),
                borderRadius: 'var(--radius-pill)', transition: 'var(--transition-control)',
              }}>
              {AUDIENCE[k].label}
            </button>
          ))}
        </div>
        <div role="tabpanel" id={'panel-' + who} aria-labelledby={'tab-' + who}
          style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 48, alignItems: 'start' }}>
          <h3 style={{ font: 'var(--weight-medium) 30px/1.25 var(--font-serif-display)', color: 'var(--text-strong)', margin: 0, maxWidth: '20ch' }}>
            {cur.heading}
          </h3>
          <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: 16 }}>
            {cur.points.map((p) => (
              <li key={p} style={{ display: 'flex', gap: 14, font: 'var(--text-body-lg)', color: 'var(--text-body)' }}>
                <Icon name="circle-check-big" size={26} color="var(--sage-500)" />
                <span>{p}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WRAP, Eyebrow, Hero, HowItWorks, AudienceTabs });