const DS = window.AmityInternationalSchoolDesignSystem_4d34f4;
const { Button, Icon, Badge, Card, Tag, Crest, NavBar, Tabs, Input, Select, Checkbox, Radio, RadioGroup, Dialog, Toast, Tooltip, IconButton } = DS;
const CREST = 'assets/amity-crest.png';
const THEME_LINE = 'Argument first. Humility always.';

const Wrap = ({ children, style }) => <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 24px', ...style }}>{children}</div>;

const Section = ({ id, eyebrow, title, intro, action, children, tone = 'page' }) => (
  <section id={id} style={{ background: tone === 'sunken' ? 'var(--surface-sunken)' : 'var(--surface-page)', padding: '64px 0', borderTop: tone === 'sunken' ? '1px solid var(--border-subtle)' : 'none' }}>
    <Wrap>
      <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, marginBottom: 32 }}>
        <div>
          {eyebrow && <div style={{ font: 'var(--type-eyebrow)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--intent-alert)' }}>{eyebrow}</div>}
          <h2 style={{ font: 'var(--type-h1)', color: 'var(--text-heading)', margin: '8px 0 0' }}>{title}</h2>
          {intro && <p style={{ font: 'var(--type-body)', color: 'var(--neutral-700)', maxWidth: '62ch', margin: '12px 0 0' }}>{intro}</p>}
        </div>
        {action}
      </div>
      {children}
    </Wrap>
  </section>
);

const FactList = ({ rows, onNavy }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
    {rows.map(([l, d]) => (
      <div key={l} style={{ display: 'flex', justifyContent: 'space-between', gap: 16, font: 'var(--type-body-sm)', paddingBottom: 10, borderBottom: `1px solid ${onNavy ? 'rgba(255,255,255,.2)' : 'var(--border-subtle)'}` }}>
        <span style={{ color: onNavy ? 'rgba(255,255,255,.8)' : 'var(--neutral-700)' }}>{l}</span>
        <strong style={{ color: onNavy ? '#fff' : 'var(--text-heading)', textAlign: 'right' }}>{d}</strong>
      </div>
    ))}
  </div>
);

function Hero({ onRegister }) {
  return (
    <div style={{ position: 'relative', background: 'var(--surface-navy)', borderBottom: '3px solid var(--amity-yellow)', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0 }}>
        <img src="assets/seshiran.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '68% 30%' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg,rgba(5,42,92,.96) 0%,rgba(5,42,92,.88) 46%,rgba(5,42,92,.35) 100%)' }} />
      </div>
      <Wrap style={{ position: 'relative', padding: '80px 24px' }}>
        <div style={{ maxWidth: '58ch', display: 'grid', gap: 16, justifyItems: 'start' }}>
          <img src={CREST} alt="Amity International School crest" style={{ width: 68 }} />
          <div style={{ font: 'var(--type-eyebrow)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--amity-yellow)' }}>Amity International School · IYS Festival Ltd</div>
          <h1 style={{ font: 'var(--type-hero)', color: '#fff', margin: 0 }}>Amity International Debate Championship 2026</h1>
          <p style={{ font: 'var(--type-h3)', fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400, color: 'var(--amity-yellow)', margin: 0 }}>{THEME_LINE}</p>
          <p style={{ font: 'var(--type-body)', color: 'rgba(255,255,255,.85)', margin: 0 }}>A week of debate and public speaking training with two international coaches, closing with a fully adjudicated championship in World Schools style. Junior and Senior divisions.</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 12 }}>
            <Button variant="secondary" size="lg" onClick={onRegister}>Register to compete</Button>
            <Button variant="onNavy" size="lg" iconRight={<Icon name="arrow-right" size={18} />} onClick={() => { window.location.hash = '#format'; }}>See the format</Button>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 8 }}>
            <Tag>Training 26–30 October 2026</Tag>
            <Tag>Championship 31 October 2026</Tag>
          </div>
        </div>
      </Wrap>
    </div>
  );
}

function AtAGlance() {
  const items = [['calendar-days', 'Training week', '26–30 October 2026, one 3-hour session a day'], ['calendar-check', 'Championship', '31 October 2026, three prelims and a final'], ['graduation-cap', 'Divisions', 'Junior 9–12 years · Senior 13–18 years'], ['file-text', 'Certification', 'IYS certificate for every participant']];
  return (
    <div style={{ background: 'var(--surface-sunken)', borderBottom: '1px solid var(--border-subtle)' }}>
      <Wrap style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,1fr))', gap: 24, padding: '32px 24px' }}>
        {items.map(([ic, t, d]) => (
          <div key={t} style={{ display: 'flex', gap: 12 }}>
            <Icon name={ic} size={24} strokeColor="var(--amity-red)" />
            <div>
              <div style={{ font: 'var(--type-label)', color: 'var(--text-heading)' }}>{t}</div>
              <div style={{ font: 'var(--type-body-sm)', color: 'var(--neutral-700)', marginTop: 4 }}>{d}</div>
            </div>
          </div>
        ))}
      </Wrap>
    </div>
  );
}

function Format() {
  const divisions = [
    ['Junior division', 'green', [['Format', 'Modified World Schools'], ['Speech length', '6 minutes'], ['Team size', '3 students'], ['Rounds', '3 prelims + final'], ['Age', '9–12 years']]],
    ['Senior division', 'blue', [['Format', 'World Schools style'], ['Speech length', '8 minutes'], ['Team size', '3 students'], ['Rounds', '3 prelims + final'], ['Age', '13–18 years']]]
  ];
  return (
    <Section id="format" eyebrow="The championship" title="Two divisions, one format family" intro="Motions are accessible and released in advance for prelims: technology, environment, school life and sport. Draws, tabulation and results are run on Tabbycat by IYS Festival Ltd.">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 24 }}>
        {divisions.map(([name, accent, rows]) => (
          <Card key={name} variant="raised" accent={accent}>
            <h3 style={{ font: 'var(--type-h2)', color: 'var(--text-heading)', margin: '0 0 20px' }}>{name}</h3>
            <FactList rows={rows} />
            <div style={{ marginTop: 20 }}><Badge tone="neutral">Winner trophy + Best Speaker award</Badge></div>
          </Card>
        ))}
      </div>
    </Section>
  );
}

function Trainers() {
  const people = [
    ['assets/shannon.jpg', '50% 22%', 'Shannon Wardlaw', 'Trainer & convener', 'Graduate Debater in Residence at The King\u2019s School Canterbury and National Head Coach of the Kenya WSDC team. Seven-time tournament champion across South Africa, Zimbabwe and Uganda.'],
    ['assets/seshiran.jpg', '44% 30%', 'Seshiran Govender', 'Trainer & convener', 'Debater in Residence at Eastbourne College. Head Coach of the Kenya team that made the country\u2019s first-ever WSDC break in Panama 2025, and Deputy Chief Adjudicator at PAUDC 2024.']
  ];
  return (
    <Section id="trainers" tone="sunken" eyebrow="Who leads it" title="Your trainers and conveners" intro="Both coaches deliver the training week on campus and convene the championship, chief-adjudicating the finals.">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(320px,1fr))', gap: 24 }}>
        {people.map(([src, pos, name, role, bio]) => (
          <Card key={name} variant="raised" padding="0" style={{ overflow: 'hidden' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '140px 1fr' }}>
              <img src={src} alt={name} style={{ width: '100%', height: '100%', minHeight: 200, objectFit: 'cover', objectPosition: pos, display: 'block' }} />
              <div style={{ padding: 24 }}>
                <div style={{ font: 'var(--type-eyebrow)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--amity-red-700)' }}>{role}</div>
                <h3 style={{ font: 'var(--type-h3)', color: 'var(--text-heading)', margin: '8px 0 0' }}>{name}</h3>
                <p style={{ font: 'var(--type-body-sm)', color: 'var(--neutral-700)', margin: '12px 0 0' }}>{bio}</p>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </Section>
  );
}

function Week() {
  const days = [['Monday 26 Oct', 'Foundations', 'Case construction, roles and speaker duties.'], ['Tuesday 27 Oct', 'Argument', 'Building positions from evidence; burdens and clash.'], ['Wednesday 28 Oct', 'Rebuttal', 'Engaging what the other side actually said.'], ['Thursday 29 Oct', 'Delivery', 'Structure, presence and points of information.'], ['Friday 30 Oct', 'Practice rounds', 'Full-length debates with adjudicator feedback.'], ['Saturday 31 Oct', 'Championship', 'Three preliminary rounds, finals and awards ceremony.']];
  return (
    <Section id="schedule" eyebrow="The week" title="What the programme looks like" intro="Junior and Senior tracks run simultaneously in separate rooms, one three-hour session per day per track.">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 20 }}>
        {days.map(([d, t, b], i) => (
          <Card key={d} variant="plain" accent={i === 5 ? 'red' : undefined}>
            <div style={{ font: 'var(--type-eyebrow)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--text-subtle)' }}>{d}</div>
            <h3 style={{ font: 'var(--type-h3)', color: 'var(--text-heading)', margin: '8px 0 0' }}>{t}</h3>
            <p style={{ font: 'var(--type-body-sm)', color: 'var(--neutral-700)', margin: '10px 0 0' }}>{b}</p>
          </Card>
        ))}
      </div>
    </Section>
  );
}

function Outcomes() {
  const list = ['Critical thinking — analyse any argument and find its weaknesses', 'Public speaking — structure, confidence and presence', 'Research skills — positions built from evidence, not opinion', 'Rebuttal technique — engage and dismantle the other side', 'Competitive experience — a real result in an adjudicated tournament', 'A pathway forward — IYS open competitions and international events'];
  return (
    <Section tone="sunken" eyebrow="Outcomes" title="What students leave with">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 16 }}>
        {list.map(x => (
          <div key={x} style={{ display: 'flex', gap: 12, background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 8, padding: '16px 18px' }}>
            <Icon name="arrow-right" size={20} strokeColor="var(--amity-navy)" />
            <span style={{ font: 'var(--type-body-sm)', color: 'var(--neutral-700)' }}>{x}</span>
          </div>
        ))}
      </div>
    </Section>
  );
}

function RegisterBand({ onRegister }) {
  return (
    <div style={{ background: 'var(--surface-navy-deep)', padding: '64px 0' }}>
      <Wrap style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 32 }}>
        <div>
          <h2 style={{ font: 'var(--type-h1)', color: '#fff', margin: 0 }}>Registration closes 20 October</h2>
          <p style={{ font: 'var(--type-body)', color: 'rgba(255,255,255,.85)', margin: '12px 0 0', maxWidth: '56ch' }}>Register your child for the training week and the championship. Places in each division are limited and confirmed by email within three working days.</p>
        </div>
        <Button variant="secondary" size="lg" onClick={onRegister}>Register to compete</Button>
      </Wrap>
    </div>
  );
}

function SiteFooter() {
  return (
    <footer style={{ background: 'var(--surface-navy)', borderTop: '3px solid var(--amity-yellow)', padding: '48px 0 32px' }}>
      <Wrap style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 40 }}>
        <div>
          <img src={CREST} alt="Amity International School crest" style={{ width: 56 }} />
          <p style={{ font: 'var(--type-body-sm)', color: 'rgba(255,255,255,.72)', marginTop: 16 }}>Amity International School<br />Sector 43, Gurugram · Affiliated to CBSE<br />debate@amityinternational.edu.in</p>
        </div>
        <div>
          <div style={{ font: 'var(--type-eyebrow)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--amity-yellow)' }}>Championship</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 16 }}>
            {[['Format', '#format'], ['Trainers', '#trainers'], ['Schedule', '#schedule'], ['Questions', '#faq']].map(([l, h]) => <a key={l} href={h} style={{ font: 'var(--type-body-sm)', color: 'rgba(255,255,255,.82)', textDecoration: 'none' }}>{l}</a>)}
          </div>
        </div>
        <div>
          <div style={{ font: 'var(--type-eyebrow)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--amity-yellow)' }}>Delivered with</div>
          <p style={{ font: 'var(--type-body-sm)', color: 'rgba(255,255,255,.82)', marginTop: 16 }}>IYS Festival Ltd, a United Kingdom registered company organising competitive debate and public speaking events for schools.</p>
        </div>
      </Wrap>
      <Wrap style={{ marginTop: 40, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,.18)', display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'space-between' }}>
        <span style={{ font: 'var(--type-body-sm)', fontSize: 12, color: 'rgba(255,255,255,.6)' }}>© 2026 Amity International School</span>
        <span style={{ font: 'var(--type-motto)', fontSize: 15, color: 'var(--amity-yellow)' }}>विद्या ददाति विनयम् · Knowledge gives humility</span>
      </Wrap>
    </footer>
  );
}

Object.assign(window, { DS, Button, Icon, Badge, Card, Tag, Crest, NavBar, Tabs, Input, Select, Checkbox, Radio, RadioGroup, Dialog, Toast, Tooltip, IconButton, Wrap, Section, FactList, Hero, AtAGlance, Format, Trainers, Week, Outcomes, RegisterBand, SiteFooter, CREST, THEME_LINE });
