// Middle + lower sections

function StepArt({ kind }) {
  const common = { width: 72, height: 72, viewBox: '0 0 72 72', fill: 'none', stroke: 'currentColor', strokeWidth: 1.25 };
  if (kind === 'mic') return (
    <svg {...common}>
      <rect x="30" y="14" width="12" height="28" rx="6" />
      <path d="M22 36c0 8 6 14 14 14s14-6 14-14" />
      <line x1="36" y1="50" x2="36" y2="58" />
      <line x1="28" y1="58" x2="44" y2="58" />
    </svg>
  );
  if (kind === 'sort') return (
    <svg {...common}>
      <rect x="10" y="14" width="22" height="8" />
      <rect x="10" y="30" width="22" height="8" />
      <rect x="10" y="46" width="22" height="8" />
      <path d="M38 18 L50 18 M38 34 L54 34 M38 50 L46 50" />
      <circle cx="58" cy="18" r="3" fill="currentColor" />
      <circle cx="58" cy="34" r="3" fill="currentColor" opacity="0.6" />
      <circle cx="58" cy="50" r="3" fill="currentColor" opacity="0.3" />
    </svg>
  );
  if (kind === 'deliver') return (
    <svg {...common}>
      <rect x="14" y="12" width="28" height="36" />
      <line x1="20" y1="20" x2="36" y2="20" />
      <line x1="20" y1="26" x2="34" y2="26" />
      <line x1="20" y1="32" x2="32" y2="32" />
      <path d="M42 30 L58 30 L58 54 L30 54 L30 48" />
      <path d="M52 24 L58 30 L52 36" />
    </svg>
  );
  return null;
}

function HowItWorks() {
  const steps = [
    { n: '01', art: 'mic',     title: 'Record or upload.',        body: 'Speak your feedback naturally into your browser, or upload pre-recorded audio. Live level monitoring, pause and resume, all major formats supported.' },
    { n: '02', art: 'sort',    title: 'Select your rubric.',      body: 'Choose from 7 pre-built templates — essays, lab reports, dissertations, presentations, code and more. Or build your own, import from Excel, or pull from Canvas.' },
    { n: '03', art: 'deliver', title: 'Get structured feedback.', body: 'AI organises your comments by rubric criterion with suggested percentage scores and colour-coded labels. Export to PDF or Word, or push straight to Canvas.' }
  ];
  return (
    <section className="section" id="how">
      <div className="container">
        <div className="section-head">
          <div className="label">How it works</div>
          <h2>Three steps between pressing record and a finished report.</h2>
          <p>The same verbal feedback you already give — now transcribed, structured against your rubric, and exportable in seconds.</p>
        </div>
        <div className="steps" style={{gridTemplateColumns: 'repeat(3, 1fr)'}}>
          {steps.map(s => (
            <div className="step" key={s.n}>
              <div className="step-num">{s.n}</div>
              <div className="step-art"><StepArt kind={s.art} /></div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Features() {
  return (
    <section className="section" id="features">
      <div className="container">
        <div className="section-head">
          <div className="label">Features</div>
          <h2>Everything you need for better marking.</h2>
          <p>Built by academics, for academics. Every feature designed around real higher-education marking workflows.</p>
        </div>
        <div className="features">
          <div className="feature-card wide">
            <div className="feature-copy">
              <div className="label">AI scoring against your rubric</div>
              <h3>Every comment lands in the right column, with a suggested score.</h3>
              <p>Pick a rubric template or upload your own. Markaloud routes spoken feedback to matching criteria and proposes a percentage score for each — colour-coded, editable, never final until you say so.</p>
              <p style={{color: 'var(--ink-3)', fontSize: 13}}>Works with analytic, holistic and custom rubric styles. Seven pre-built templates included.</p>
            </div>
            <div className="feature-art">
              <div className="mini-rubric">
                <div className="mini-rubric-row"><span className="mini-rubric-label">Argument &amp; analysis</span><div className="mini-bar"><span style={{width: '78%'}} /></div><span className="mini-count">78%</span></div>
                <div className="mini-rubric-row"><span className="mini-rubric-label">Use of evidence</span><div className="mini-bar"><span style={{width: '64%'}} /></div><span className="mini-count">64%</span></div>
                <div className="mini-rubric-row"><span className="mini-rubric-label">Referencing</span><div className="mini-bar"><span style={{width: '82%'}} /></div><span className="mini-count">82%</span></div>
                <div className="mini-rubric-row"><span className="mini-rubric-label">Structure</span><div className="mini-bar"><span style={{width: '58%'}} /></div><span className="mini-count">58%</span></div>
                <div className="mini-rubric-row"><span className="mini-rubric-label">Writing quality</span><div className="mini-bar"><span style={{width: '71%'}} /></div><span className="mini-count">71%</span></div>
              </div>
            </div>
          </div>

          <div className="feature-card">
            <div className="label">Batch marking</div>
            <h3>Process a whole cohort in one go.</h3>
            <p style={{color: 'var(--ink-3)'}}>Upload multiple audio files at once. Markaloud auto-detects student names from filenames and runs transcription, scoring and structuring for every submission in parallel.</p>
            <div style={{flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 16}}>
              <div className="snippet-stack">
                <div className="snippet"><div className="snippet-meta"><span>Emily_R.m4a</span><span>✓ DONE</span></div><p>Transcribed · scored 72% · 3 criteria flagged for review.</p></div>
                <div className="snippet"><div className="snippet-meta"><span>Jamal_K.m4a</span><span>✓ DONE</span></div><p>Transcribed · scored 68% · 1 criterion flagged for review.</p></div>
                <div className="snippet"><div className="snippet-meta"><span>Priya_S.m4a</span><span>Processing</span></div><p>Transcription 64% · scoring pending.</p></div>
              </div>
            </div>
          </div>

          <div className="feature-card">
            <div className="label">Class analytics</div>
            <h3>See the whole cohort at a glance.</h3>
            <p style={{color: 'var(--ink-3)'}}>Aggregate scores across the class. Spot common strengths, recurring weaknesses, and score distributions by criterion — ready for moderation meetings and external examiners.</p>
            <div style={{flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 16}}>
              <div style={{width: '100%', maxWidth: 340}}>
                <div style={{border: '1px solid var(--rule)', padding: 16, background: 'var(--bg)', fontFamily: 'var(--font-sans)', fontSize: 13}}>
                  <div style={{display:'flex', justifyContent:'space-between', marginBottom: 12, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-3)'}}>
                    <span>Cohort overview</span><span>28 students</span>
                  </div>
                  <div style={{fontFamily:'var(--font-serif)', fontSize: 17, lineHeight: 1.35, color: 'var(--ink)', marginBottom: 10}}>
                    Class mean <strong>67%</strong> — referencing is the weakest criterion.
                  </div>
                  <div style={{color: 'var(--ink-3)', fontSize: 12.5, lineHeight: 1.5}}>
                    14 of 28 students scored below 60% on referencing. Strong across argument and analysis.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style={{marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20}}>
          <div style={{padding: '20px 0', borderTop: '1px solid var(--ink)'}}>
            <div className="label" style={{marginBottom: 8}}>In-browser recording</div>
            <p style={{fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.55}}>Record directly in the browser with live audio-level monitoring. Pause, resume, and stop with ease.</p>
          </div>
          <div style={{padding: '20px 0', borderTop: '1px solid var(--ink)'}}>
            <div className="label" style={{marginBottom: 8}}>Rubric templates</div>
            <p style={{fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.55}}>7 pre-built templates for essays, labs, dissertations, presentations, code and more. Fully customisable.</p>
          </div>
          <div style={{padding: '20px 0', borderTop: '1px solid var(--ink)'}}>
            <div className="label" style={{marginBottom: 8}}>PDF &amp; Word export</div>
            <p style={{fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.55}}>Download formatted feedback reports. Copy as Markdown or plain text for any platform.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Security() {
  return (
    <section className="section" id="security">
      <div className="container">
        <div className="section-head">
          <div className="label">Privacy &amp; compliance</div>
          <h2>Built for institutional trust.</h2>
          <p>Markaloud is designed to meet the requirements of UK universities. We'll happily walk through our full DPA with your privacy team.</p>
        </div>
        <div className="security">
          <div>
            <div className="label">Compliance</div>
            <div className="cert-row">
              <span className="cert">UK GDPR</span>
              <span className="cert">Signed DPA</span>
              <span className="cert">Zero AI training</span>
              <span className="cert">Audit logging</span>
            </div>
            <p style={{marginTop: 24, color: 'var(--ink-3)', fontSize: 15, maxWidth: '38ch', lineHeight: 1.55}}>
              Full UK GDPR compliance with Data Processing Agreements, data export, account deletion, and documented processing activities.
            </p>
          </div>
          <div className="security-list">
            <div className="security-item">
              <span className="security-num">01</span>
              <div>
                <h4>GDPR compliant.</h4>
                <p>Full UK GDPR compliance with signed Data Processing Agreements, data export on request, account deletion, and documented processing activities for every cohort.</p>
              </div>
            </div>
            <div className="security-item">
              <span className="security-num">02</span>
              <div>
                <h4>Zero AI training on your data.</h4>
                <p>Neither OpenAI nor Anthropic use your data to train foundation models. Audio and transcripts are processed and immediately discarded by our providers.</p>
              </div>
            </div>
            <div className="security-item">
              <span className="security-num">03</span>
              <div>
                <h4>Audit logging.</h4>
                <p>Complete audit trail of all data access and processing — who accessed what, when. Ready for external examiner and compliance reviews.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const tiers = [
    {
      name: 'Free trial',
      sub: 'For individual teachers sampling the product.',
      price: '£0',
      cadence: '60 minutes of transcription',
      cta: 'Try free',
      ctaHref: 'https://app.markaloud.cloud/register',
      features: [
        'All features included',
        '60 minutes free transcription',
        'Unlimited rubrics',
        'No credit card required'
      ]
    },
    {
      name: 'Department',
      sub: 'For a single academic department.',
      price: '£5,000',
      cadence: 'per year + £0.02 / min',
      cta: 'Contact sales',
      ctaHref: 'mailto:hello@markaloud.cloud',
      features: [
        'Single department',
        'Unlimited teachers',
        'All features &amp; exports',
        'Usage dashboard',
        'Email support'
      ]
    },
    {
      name: 'Faculty',
      sub: 'For multiple departments across a faculty.',
      price: '£15,000',
      cadence: 'per year + £0.02 / min',
      cta: 'Contact sales',
      ctaHref: 'mailto:hello@markaloud.cloud',
      featured: true,
      badge: 'Most popular',
      features: [
        'Multiple departments',
        'Canvas LMS integration',
        'Class analytics',
        'GDPR compliant with DPA',
        'Priority support',
        'Onboarding assistance'
      ]
    },
    {
      name: 'Institution',
      sub: 'University-wide access at scale.',
      price: '£40,000',
      cadence: 'per year + £0.02 / min',
      cta: 'Contact sales',
      ctaHref: 'mailto:hello@markaloud.cloud',
      features: [
        'University-wide access',
        'All Faculty features',
        'Dedicated account manager',
        'Custom integrations',
        'SLA guarantee',
        'On-premises option'
      ]
    }
  ];
  return (
    <section className="section" id="pricing">
      <div className="container">
        <div className="section-head">
          <div className="label">Pricing</div>
          <h2>Simple, transparent pricing.</h2>
          <p>Pay for what you use. No hidden fees, no per-seat charges. Start with 60 minutes of free transcription on every plan.</p>
        </div>
        <div className="pricing-grid" style={{gridTemplateColumns: 'repeat(4, 1fr)'}}>
          {tiers.map(t => (
            <div className={`tier ${t.featured ? 'featured' : ''}`} key={t.name}>
              <div className="tier-head">
                <h3>{t.name}</h3>
                {t.badge && <span className="tier-badge">{t.badge}</span>}
              </div>
              <p className="tier-sub">{t.sub}</p>
              <div className="tier-price-row">
                <span className="tier-price">{t.price}</span>
              </div>
              <div style={{fontSize: 13, color: t.featured ? 'color-mix(in oklab, var(--bg) 70%, transparent)' : 'var(--ink-3)', marginTop: 4}}>{t.cadence}</div>
              <ul>
                {t.features.map(f => <li key={f} dangerouslySetInnerHTML={{__html: f}} />)}
              </ul>
              <a href={t.ctaHref} className={`btn ${t.featured ? 'btn-ghost on-hero' : 'btn-primary'}`}>
                {t.cta}
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhyDictation() {
  return (
    <section className="section why-dictation" id="why-dictation" style={{background: 'var(--bg-raised)'}}>
      <div className="container">
        <div className="section-head">
          <div className="label">Why dictation, not AI marking</div>
          <h2>The judgement stays human. The typing doesn't.</h2>
          <p>We deliberately don't let AI grade student work. Academic judgement is the job — and it's the part students, examiners and regulators trust you to do. Markaloud handles the clerical layer around it.</p>
        </div>
        <div style={{display: 'grid', gridTemplateColumns: '1fr', gap: 2, background: 'var(--rule)', border: '1px solid var(--rule)'}}>
          <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2, background: 'var(--rule)'}}>
            <div style={{background: 'var(--bg-raised)', padding: '36px 32px', display: 'flex', flexDirection: 'column', gap: 14, minHeight: 260}}>
              <div className="label">01 · Expertise</div>
              <h3 style={{fontSize: 22, letterSpacing: '-0.015em', lineHeight: 1.15}}>Your expertise is the product.</h3>
              <p style={{fontSize: 14.5, color: 'var(--ink-3)', lineHeight: 1.55}}>Years of discipline knowledge, pedagogical intuition and subject feel don't live in a language model. Markaloud captures what you already say to students \u2014 then gets out of the way.</p>
            </div>
            <div style={{background: 'var(--bg-raised)', padding: '36px 32px', display: 'flex', flexDirection: 'column', gap: 14, minHeight: 260}}>
              <div className="label">02 · Defensible</div>
              <h3 style={{fontSize: 22, letterSpacing: '-0.015em', lineHeight: 1.15}}>Defensible to examiners and students.</h3>
              <p style={{fontSize: 14.5, color: 'var(--ink-3)', lineHeight: 1.55}}>Every grade traces back to a human voice and a human decision. No black-box scoring to justify in appeals, moderation meetings, or to an external examiner.</p>
            </div>
            <div style={{background: 'var(--bg-raised)', padding: '36px 32px', display: 'flex', flexDirection: 'column', gap: 14, minHeight: 260}}>
              <div className="label">03 · Ethical</div>
              <h3 style={{fontSize: 22, letterSpacing: '-0.015em', lineHeight: 1.15}}>Ethical by design, not by policy.</h3>
              <p style={{fontSize: 14.5, color: 'var(--ink-3)', lineHeight: 1.55}}>No AI opinion on student work. No training on student data. No bias smuggled in through a model's preferences. The pedagogical call is yours, start to finish.</p>
            </div>
          </div>
        </div>
        <div style={{marginTop: 40, padding: 32, border: '1px solid var(--ink)', background: 'var(--bg)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40}}>
          <div>
            <div className="label" style={{marginBottom: 12}}>What Markaloud does</div>
            <ul style={{listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10}}>
              <li style={{fontSize: 15, color: 'var(--ink-2)', display: 'grid', gridTemplateColumns: '16px 1fr', gap: 10}}><span style={{color: 'var(--accent)', fontWeight: 600}}>+</span>Transcribes your voice, accurately</li>
              <li style={{fontSize: 15, color: 'var(--ink-2)', display: 'grid', gridTemplateColumns: '16px 1fr', gap: 10}}><span style={{color: 'var(--accent)', fontWeight: 600}}>+</span>Organises comments against your rubric</li>
              <li style={{fontSize: 15, color: 'var(--ink-2)', display: 'grid', gridTemplateColumns: '16px 1fr', gap: 10}}><span style={{color: 'var(--accent)', fontWeight: 600}}>+</span>Drafts a clean report you can edit</li>
              <li style={{fontSize: 15, color: 'var(--ink-2)', display: 'grid', gridTemplateColumns: '16px 1fr', gap: 10}}><span style={{color: 'var(--accent)', fontWeight: 600}}>+</span>Aggregates cohort data you asked for</li>
            </ul>
          </div>
          <div>
            <div className="label" style={{marginBottom: 12}}>What Markaloud won't do</div>
            <ul style={{listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10}}>
              <li style={{fontSize: 15, color: 'var(--ink-2)', display: 'grid', gridTemplateColumns: '16px 1fr', gap: 10}}><span style={{color: 'var(--ink-3)'}}>−</span>Read an essay and decide a grade</li>
              <li style={{fontSize: 15, color: 'var(--ink-2)', display: 'grid', gridTemplateColumns: '16px 1fr', gap: 10}}><span style={{color: 'var(--ink-3)'}}>−</span>Generate feedback you didn't say</li>
              <li style={{fontSize: 15, color: 'var(--ink-2)', display: 'grid', gridTemplateColumns: '16px 1fr', gap: 10}}><span style={{color: 'var(--ink-3)'}}>−</span>Train models on student submissions</li>
              <li style={{fontSize: 15, color: 'var(--ink-2)', display: 'grid', gridTemplateColumns: '16px 1fr', gap: 10}}><span style={{color: 'var(--ink-3)'}}>−</span>Replace the academic in the loop</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function FooterCTA() {
  return (
    <section className="footer-cta">
      <div className="container">
        <div className="label on-hero">Ready when you are</div>
        <h2 style={{marginTop: 16}}>Transform your <em>marking.</em></h2>
        <p style={{marginTop: 24, color: 'var(--hero-ink-3)', fontSize: 18, maxWidth: '50ch'}}>
          Start with 60 minutes of free transcription. No credit card required.
        </p>
        <div className="hero-ctas">
          <a href="https://app.markaloud.cloud/register" className="btn btn-primary on-hero">Get started free</a>
          <a href="mailto:hello@markaloud.cloud" className="btn btn-ghost on-hero">Contact sales <span className="btn-arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-inner">
          <div>
            <Wordmark onHero />
            <p style={{marginTop: 16, maxWidth: '32ch', color: 'var(--hero-ink-3)'}}>
              AI-powered academic feedback, built for UK higher education.
            </p>
          </div>
          <div className="footer-cols">
            <div className="footer-col">
              <h5>Product</h5>
              <a href="#features">Features</a>
              <a href="#pricing">Pricing</a>
              <a href="#security">Privacy</a>
              <a href="https://app.markaloud.cloud/login">Sign in</a>
            </div>
            <div className="footer-col">
              <h5>Resources</h5>
              <a href="https://app.markaloud.cloud/privacy">Privacy policy</a>
              <a href="https://app.markaloud.cloud/privacy/dpa">Data Processing Agreement</a>
              <a href="mailto:hello@markaloud.cloud">Contact</a>
            </div>
          </div>
        </div>
        <div className="footer-meta">
          <span>© 2026 Markaloud. All rights reserved.</span>
          <span>hello@markaloud.cloud</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { HowItWorks, Features, Security, Pricing, FooterCTA, Footer, WhyDictation });