/* global React */
// Story screen — origin narrative, founder, timeline.
const DSs = window.MaddyieLabsDesignSystem_80a5eb;
const { NavBar: NavBarS, Footer: FooterS, Button: ButtonS, SectionIntro: SectionIntroS, Badge: BadgeS } = DSs;

const CW = '1120px';

function StoryScreen({ go }) {
  return (
    <div>
      <div style={{ background: 'var(--white)', borderBottom: '1px solid var(--border-quiet)' }}>
        <NavBarS active="Story" onNavigate={go} markSrc={window.__resources.markPurple} wordmarkSrc={window.__resources.wordBlack} />
      </div>

      {/* Header */}
      <section style={{ background: 'var(--white)', padding: '96px 40px 64px' }}>
        <div style={{ maxWidth: '820px', margin: '0 auto' }}>
          <BadgeS tone="grey" mono>Founded 2025</BadgeS>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '60px', lineHeight: 1.04, letterSpacing: 'var(--tracking-display)', margin: '20px 0 0', color: 'var(--ink-1)', textWrap: 'balance' }}>
            The future should not be built by throwing away trusted systems.
          </h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: '21px', lineHeight: 1.55, color: 'var(--ink-2)', margin: '26px 0 0', textWrap: 'pretty' }}>
            It should be built by helping people understand them, strengthen them, and make them easier to trust.
          </p>
        </div>
      </section>

      {/* Origin prose on warm sand */}
      <section style={{ background: 'var(--warm-sand)', padding: '88px 40px' }}>
        <div style={{ maxWidth: '680px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '24px' }}>
          {[
            'Maddyie Labs began with real-world experience across laboratories, data science, and consulting — environments where quality, evidence, traceability, and human judgement were part of everyday work. Every result, decision, and deviation needed context, documentation, and accountability.',
            'That work exposed a persistent problem. Modern laboratories are full of valuable systems, data, and expertise, but the burden of connecting them falls on people. Teams spend too much time chasing evidence, reconciling information, and manually proving that work was done correctly.',
            'The challenge was never a shortage of software. It was a shortage of connected, trustworthy, operational intelligence — systems working together in a way that preserves context and strengthens accountability.',
          ].map((p, i) => (
            <p key={i} style={{ fontFamily: 'var(--font-body)', fontSize: '18px', lineHeight: 1.65, color: 'var(--ink-2)', margin: 0, textWrap: 'pretty' }}>{p}</p>
          ))}
          <blockquote style={{ margin: '12px 0 0', paddingLeft: '24px', borderLeft: '3px solid var(--accent)' }}>
            <p style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '26px', lineHeight: 1.25, letterSpacing: '-0.01em', color: 'var(--ink-1)', margin: 0, textWrap: 'pretty' }}>
              In places where resources are limited, people learn to repair, adapt, and improve what they already have.
            </p>
          </blockquote>
        </div>
      </section>

      {/* Founder */}
      <section style={{ background: 'var(--white)', padding: '88px 40px' }}>
        <div style={{ maxWidth: CW, margin: '0 auto', display: 'grid', gridTemplateColumns: '300px 1fr', gap: '56px', alignItems: 'start' }}>
          <div>
            <div style={{ width: '100%', aspectRatio: '1', borderRadius: 'var(--radius-lg)', background: 'var(--soft-lilac)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <img src={window.__resources.markPurple} alt="" style={{ width: '46%', opacity: 0.9 }} />
            </div>
            <div style={{ marginTop: '16px', fontFamily: 'var(--font-body)' }}>
              <div style={{ fontWeight: 700, fontSize: '16px', color: 'var(--ink-1)' }}>Maddison Frogley</div>
              <div style={{ fontSize: '14px', color: 'var(--ink-3)' }}>Founder &amp; CEO</div>
            </div>
          </div>
          <div>
            <SectionIntroS eyebrow="The founder" size="2xl" maxWidth={620}
              title="Built by someone who has done the work, not just described it."
              lead="Maddison grew up along the rugged coastal cliffs of regional Victoria, in communities where resourcefulness was part of daily life — then carried that into laboratories, data science, and consulting." />
            <p style={{ fontFamily: 'var(--font-body)', fontSize: '17px', lineHeight: 1.6, color: 'var(--ink-2)', margin: '20px 0 0', maxWidth: '620px', textWrap: 'pretty' }}>
              You do not discard something valuable simply because it is old or imperfect. You understand it, repair it, and make it better — even if only by one degree.
            </p>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ background: 'var(--deep-aubergine)', padding: '88px 40px' }}>
        <div style={{ maxWidth: CW, margin: '0 auto', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '28px' }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '40px', letterSpacing: '-0.02em', color: 'var(--white)', margin: 0, maxWidth: '680px', textWrap: 'balance' }}>
            We are building something real. Come help us build it.
          </h2>
          <Button variant="primary" onDark size="lg" arrow onClick={() => go('Careers')}>See open roles</Button>
        </div>
      </section>

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

window.StoryScreen = StoryScreen;