/* global React */
// Home screen — hero, belief, how-we-build, voice/attitude, CTA band.
const DS = window.MaddyieLabsDesignSystem_80a5eb;
const { NavBar, Footer, Button, Card, SectionIntro, PillarItem, Badge } = DS;

const C = '1120px'; // content width
function Section({ bg, children, pad = '112px 40px', dark, id }) {
  return (
    <section data-screen-label={id} style={{ background: bg || 'var(--white)', padding: pad }}>
      <div style={{ maxWidth: C, margin: '0 auto', color: dark ? 'var(--text-on-dark)' : 'inherit' }}>{children}</div>
    </section>
  );
}

function Hero({ go }) {
  return (
    <div style={{ background: 'var(--deep-aubergine)', position: 'relative', overflow: 'hidden' }}>
      <NavBar onDark active="" onNavigate={go} markSrc={window.__resources.markPurple} wordmarkSrc={window.__resources.wordWhite} />
      <img src={window.__resources.markPurple} alt="" aria-hidden="true"
        style={{ position: 'absolute', right: '-90px', top: '40px', width: '420px', opacity: 0.16, pointerEvents: 'none' }} />
      <div style={{ maxWidth: C, margin: '0 auto', padding: '120px 40px 128px', position: 'relative' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: '13px', letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--purple-on-dark)', marginBottom: '26px' }}>
          Maddyie Labs
        </div>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '72px', lineHeight: 1.02, letterSpacing: 'var(--tracking-display)', color: 'var(--white)', margin: 0, maxWidth: '880px', textWrap: 'balance' }}>
          Practical AI for systems where proof matters.
        </h1>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: '20px', lineHeight: 1.55, color: 'var(--ink-inverse-2)', maxWidth: '620px', margin: '28px 0 40px', textWrap: 'pretty' }}>
          We build technology that helps people understand, connect, and improve the systems they already trust — without losing the context, evidence, and human judgement that make them trustworthy.
        </p>
        <div style={{ display: 'flex', gap: '14px', flexWrap: 'wrap' }}>
          <Button variant="primary" onDark size="lg" arrow onClick={() => go('cta')}>Work With Us</Button>
          <Button variant="secondary" onDark size="lg" onClick={() => go('Story')}>Read Our Story</Button>
        </div>
      </div>
    </div>
  );
}

const BELIEFS = [
  ['Truth with care', 'Honesty is kindness when it is delivered with clarity and purpose.'],
  ['Own the mess, then fix the thing', 'Mistakes are part of doing anything worthwhile. What matters is what happens next.'],
  ['Human first, job title second', 'People do their best work when they are not pretending to be someone else.'],
  ['Learn loudly, stay curious', 'The smartest person in the room is usually the one still willing to learn.'],
  ['Work to live', 'Work should support life, not quietly eat it. Burnout is not a business strategy.'],
  ['Make it better by one degree', 'Meaningful change can start small. We improve what we already have.'],
];

const BUILD = [
  ['Traceability', 'Every result shows where it came from and what evidence supports it.'],
  ['Context', 'Knowledge stays connected across systems, documents, and people.'],
  ['Human judgement', 'AI surfaces the work; people stay firmly in control of the decision.'],
  ['Responsible automation', 'We automate the burden, not the accountability.'],
  ['Systems that last', 'We strengthen trusted systems instead of discarding them.'],
  ['Visible accountability', 'Good technology makes judgement easier, not invisible.'],
];

function HomeScreen({ go }) {
  return (
    <div>
      <Hero go={go} />

      {/* Belief / about */}
      <Section bg="var(--warm-sand)" id="about">
        <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: '64px', alignItems: 'start' }}>
          <SectionIntro eyebrow="Our belief" size="3xl"
            title="We don't throw away trusted systems. We help people strengthen them." />
          <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', paddingTop: '8px' }}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: '18px', lineHeight: 1.6, color: 'var(--ink-2)', margin: 0, textWrap: 'pretty' }}>
              In regulated, evidence-heavy work, valuable knowledge lives across systems, documents, processes, data, people, and memory. The burden of connecting it almost always falls on people.
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: '18px', lineHeight: 1.6, color: 'var(--ink-2)', margin: 0, textWrap: 'pretty' }}>
              Maddyie Labs exists to make that knowledge easier to connect, inspect, and act on — grounded in proof, context, accountability, and human judgement.
            </p>
            <Button variant="ghost" arrow onClick={() => go('Story')}>Read the full story</Button>
          </div>
        </div>
      </Section>

      {/* What we believe */}
      <Section id="believe">
        <SectionIntro eyebrow="What we believe" size="2xl" maxWidth={760}
          title="Built by people who fix things."
          lead="Six values that decide how we work, hire, and treat each other." />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '0 48px', marginTop: '52px' }}>
          {BELIEFS.map(([t, d], i) => (
            <PillarItem key={t} number={i + 1} title={t} style={{ marginBottom: '28px' }}>{d}</PillarItem>
          ))}
        </div>
      </Section>

      {/* How we build */}
      <Section bg="var(--soft-lilac)" id="build">
        <SectionIntro eyebrow="How we build" size="2xl" maxWidth={760}
          title="AI should not obscure accountability. It should make accountability easier to see." />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px', marginTop: '48px' }}>
          {BUILD.map(([t, d]) => (
            <Card key={t} padding={26} style={{ background: 'var(--white)', border: '1px solid var(--border-quiet)' }}>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '20px', letterSpacing: '-0.01em', margin: '0 0 8px', color: 'var(--ink-1)' }}>{t}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: '15px', lineHeight: 1.55, color: 'var(--ink-2)', margin: 0, textWrap: 'pretty' }}>{d}</p>
            </Card>
          ))}
        </div>
      </Section>

      {/* How we talk — anti-corporate attitude */}
      <Section id="words">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center' }}>
          <div>
            <Badge tone="purple" mono>How we talk</Badge>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '40px', letterSpacing: '-0.02em', lineHeight: 1.08, margin: '18px 0 18px', color: 'var(--ink-1)' }}>
              Plain words, not corporate fog.
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: '17px', lineHeight: 1.6, color: 'var(--ink-2)', margin: '0 0 24px', textWrap: 'pretty' }}>
              We sound like a person who tells the truth and cares about doing the work properly. No synergy. No paradigm shifts. No magic. Just honest, practical, accountable work — said clearly.
            </p>
            <Button variant="secondary" arrow onClick={() => go('Story')}>How we got here</Button>
          </div>
          <WordsPanel />
        </div>
      </Section>

      {/* CTA band */}
      <Section bg="var(--deep-aubergine)" dark id="cta" pad="96px 40px">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '40px', flexWrap: 'wrap' }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '40px', letterSpacing: '-0.02em', lineHeight: 1.1, margin: 0, color: 'var(--white)', maxWidth: '620px', textWrap: 'balance' }}>
            Repair what matters. Build what is missing.
          </h2>
          <div style={{ display: 'flex', gap: '14px' }}>
            <Button variant="primary" onDark size="lg" arrow onClick={() => go('Careers')}>Work With Us</Button>
          </div>
        </div>
      </Section>

      <Footer onNavigate={go} markSrc={window.__resources.markWhite} wordmarkSrc={window.__resources.wordWhite} />
    </div>
  );
}

// Voice contrast panel — what we say vs. the corporate buzzwords we avoid.
function WordsPanel() {
  const say = [
    'Built by people who fix things.',
    'We care about proof, context, and accountability.',
    'Good technology makes judgement easier, not invisible.',
    'Make it better, even if only by one degree.',
  ];
  const avoid = ['Synergy', 'Leverage', 'Disrupt', 'Paradigm shift', 'Unlock potential', 'Seamless innovation'];
  return (
    <div style={{ border: '1px solid var(--border-quiet)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--white)', boxShadow: 'var(--shadow-card)' }}>
      <div style={{ padding: '20px 22px', background: 'var(--soft-lilac)' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: '12px' }}>We say</div>
        <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: '9px' }}>
          {say.map((s) => (
            <li key={s} style={{ display: 'flex', gap: '10px', fontFamily: 'var(--font-body)', fontSize: '14.5px', lineHeight: 1.4, color: 'var(--ink-1)' }}>
              <span aria-hidden="true" style={{ color: 'var(--accent)', fontWeight: 700 }}>—</span>{s}
            </li>
          ))}
        </ul>
      </div>
      <div style={{ padding: '20px 22px' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: '12px' }}>We avoid</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
          {avoid.map((a) => (
            <span key={a} style={{ fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--ink-3)', textDecoration: 'line-through', textDecorationColor: 'rgba(0,0,0,0.32)', border: '1px solid var(--border-quiet)', borderRadius: 'var(--radius-full)', padding: '5px 13px' }}>{a}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

window.HomeScreen = HomeScreen;