// demo-page.jsx — A realistic article-style "About" page that the
// accessibility plugin lets users customize live.

const DEMO_CONTENT = {
  navItems: ['About', 'Features', 'Contact'],
  signIn: 'Log in',
  register: 'Get started',

  heroTitle: 'Your site. Your way.',
  heroSub:   'Settingsfaction is a lightweight accessibility plugin that lets every visitor fine-tune how they experience your site — whether they live with dyslexia, ADHD, low vision, color blindness, or simply have their own preferences.',

  whyHeading: 'Built for every visitor',
  whySub:    'Three things that make Settingsfaction different.',
  why: [
    {
      title: 'No diagnosis required',
      body:  'People adjust their environment all the time — screen brightness, font size, notification volume. Settingsfaction brings that same power to websites. Anyone can use it, for any reason.',
      cta:   'See who it helps',
    },
    {
      title: 'One click from any page',
      body:  'The Adjust site button is always within reach. Preferences are saved automatically and carry across visits — so users only have to set it once.',
      cta:   'Try the demo',
    },
    {
      title: 'Drop it in. Nothing to configure.',
      body:  'One script tag. No backend, no server, no user accounts. Works on any website regardless of framework. Your visitors get a better experience from day one.',
      cta:   'Read the docs',
    },
  ],

  whatHeading: 'What users can adjust',
  whatSub:    'Six categories of controls, available instantly.',
  what: [
    { title: 'Text & reading',   body: 'Scale text from 85% to 200%, adjust line height, letter spacing, and paragraph spacing independently.' },
    { title: 'Font choice',      body: 'Switch between the site default, an easy-read face (helpful for dyslexia), serif, or monospace — instantly.' },
    { title: 'Themes',           body: 'Light, dark, high-contrast (yellow on black), and sepia. No CSS overrides needed from the site owner.' },
    { title: 'Color filters',    body: 'SVG-based simulation filters for protanopia, deuteranopia, tritanopia, and full monochrome vision.' },
    { title: 'Motion & focus',   body: 'Pause all animations in one tap. Enlarge the cursor. Add a strong keyboard-focus ring. All reversible.' },
    { title: 'Reading mask',     body: 'A soft light band follows the pointer, dimming everything else — helps users with ADHD stay on track.' },
  ],

  footerCols: [
    { title: 'Product',   items: ['Features','Profiles','Themes','Accessibility','Changelog','Roadmap','Pricing'] },
    { title: 'Explore',   items: ['Gallery','Demo','Use cases','Blog','Press kit','Community','Newsletter'] },
    { title: 'Resources', items: ['Help','Accessibility','Contact','Developer docs','Source code','About us','Terms'] },
  ],
};

function DemoHeader() {
  return (
    <header className="dp-section dp-header">
      <div className="dp-logo" aria-label="EnSnellSida" />
      <nav className="dp-nav">
        {DEMO_CONTENT.navItems.map((n, i) => (
          <DSPill key={n} active={i === 0}>{n}</DSPill>
        ))}
      </nav>
      <div className="dp-auth">
        <DSButton size="sm" variant="neutral">{DEMO_CONTENT.signIn}</DSButton>
        <DSButton size="sm" variant="primary">{DEMO_CONTENT.register}</DSButton>
      </div>
    </header>
  );
}

function DemoHero() {
  return (
    <section className="dp-section dp-hero">
      <h1 className="dp-hero-title">{DEMO_CONTENT.heroTitle}</h1>
      <p className="dp-hero-sub">{DEMO_CONTENT.heroSub}</p>
      <div className="dp-hero-cta">
        <DSButton variant="primary" size="md">See all features</DSButton>
        <DSButton variant="subtle" size="md">View gallery</DSButton>
      </div>
    </section>
  );
}

function DemoImageStrip() {
  return (
    <section className="dp-section dp-image-strip">
      <image-slot id="kt-strip-1" style={{width:'100%',height:'272px'}}
        shape="rounded" radius="4" placeholder="Drop an image"></image-slot>
      <image-slot id="kt-strip-2" style={{width:'100%',height:'272px'}}
        shape="rounded" radius="4" placeholder="Drop an image"></image-slot>
    </section>
  );
}

function DemoCardListItem({ item, index }) {
  return (
    <article className="dp-list-card">
      <image-slot id={`kt-list-${index}`} style={{width:'160px',height:'160px',flexShrink:0}}
        shape="rounded" radius="4" placeholder="Drop an image"></image-slot>
      <div className="dp-list-card-body">
        <h3 className="dp-list-card-title">{item.title}</h3>
        <p className="dp-list-card-text">{item.body}</p>
        <DSButton variant="primary" size="sm">{item.cta}</DSButton>
      </div>
    </article>
  );
}

function DemoCardList() {
  return (
    <section className="dp-section dp-card-list">
      <header className="dp-section-head">
        <h2 className="dp-section-title">{DEMO_CONTENT.whyHeading}</h2>
        <p className="dp-section-sub">{DEMO_CONTENT.whySub}</p>
      </header>
      <div className="dp-card-list-items">
        {DEMO_CONTENT.why.map((it, i) => <DemoCardListItem key={i} item={it} index={i} />)}
      </div>
    </section>
  );
}

function DemoGridCard({ item, index }) {
  return (
    <article className="dp-grid-card">
      <image-slot id={`kt-grid-${index}`} style={{width:'100%',height:'140px',display:'block'}}
        shape="rounded" radius="4" placeholder="Drop an image"></image-slot>
      <h3 className="dp-grid-card-title">{item.title}</h3>
      <p className="dp-grid-card-text">{item.body}</p>
    </article>
  );
}

function DemoCardGrid() {
  return (
    <section className="dp-section dp-card-grid">
      <header className="dp-section-head">
        <h2 className="dp-section-title">{DEMO_CONTENT.whatHeading}</h2>
        <p className="dp-section-sub">{DEMO_CONTENT.whatSub}</p>
      </header>
      <div className="dp-card-grid-items">
        {DEMO_CONTENT.what.map((it, i) => <DemoGridCard key={i} item={it} index={i} />)}
      </div>
    </section>
  );
}

function DemoFooter() {
  return (
    <footer className="dp-section dp-footer">
      <div className="dp-footer-brand">
        <div className="dp-logo" />
        <p className="dp-footer-tagline">Accessibility tools for everyone.</p>
        <div className="dp-footer-social">
          {['X','IG','YT','Li'].map(n => <span key={n} className="dp-footer-social-icon">{n}</span>)}
        </div>
      </div>
      {DEMO_CONTENT.footerCols.map(c => (
        <div key={c.title} className="dp-footer-col">
          <h4 className="dp-footer-col-title">{c.title}</h4>
          {c.items.map(it => <a key={it} href="#" className="dp-footer-link">{it}</a>)}
        </div>
      ))}
    </footer>
  );
}

function DemoPage() {
  return (
    <div className="dp-page" lang="en">
      <DemoHeader />
      <DemoHero />
      <DemoImageStrip />
      <DemoCardList />
      <DemoCardGrid />
      <DemoFooter />
    </div>
  );
}

Object.assign(window, { DemoPage, DEMO_CONTENT });