// Home tab — the sales document front page. A letter to Brett on the left,
// Meet Unordinary on the right (Good People / Strategy / Good trio in pink/yellow/green),
// two download buttons underneath the letter.

function Home({ goTab }) {
  const t = UNORDINARY_THEME;
  return (
    <BrandTheme.Provider value={t}>
      <div style={{ background: '#fff', color: t.ink, fontFamily: 'Inter, Arial', paddingBottom: 80 }}>
        <div style={{ maxWidth: 1320, margin: '0 auto', padding: '40px 32px 0' }}>

          {/* Masthead */}
          <div style={{ marginBottom: 36 }}>
            <div style={{ font: "600 12px/1 'Space Grotesk', Arial", color: UNORDINARY_THEME.primary, letterSpacing: '.08em', textTransform: 'uppercase', marginBottom: 14 }}>
              Prepared for Brett Ackroyd, Elysium EPL  ·  21 April 2026
            </div>
            <h1 style={{ font: "700 56px/1.02 'Space Grotesk', Arial", color: UNORDINARY_THEME.ink, margin: 0, letterSpacing: '-.025em', maxWidth: 900 }}>
              A partnership proposal, and a portal you can <span style={{ color: UNORDINARY_THEME.secondary }}>drive</span>.
            </h1>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1.45fr 1fr', gap: 56, alignItems: 'start' }}>
            <div>
              <Letter goTab={goTab} />
              <DownloadRow />
            </div>
            <MeetUnordinary />
          </div>
        </div>
      </div>
    </BrandTheme.Provider>
  );
}

function Letter({ goTab }) {
  const t = useBrand();
  const Para = ({ children, style }) => (
    <p style={{ font: "400 16px/1.7 Inter, Arial", color: t.body, margin: '0 0 18px', ...style }}>{children}</p>
  );
  return (
    <div style={{
      background: '#fff', border: `1px solid ${t.rule}`, borderRadius: 12,
      boxShadow: '0 8px 28px rgba(26,26,26,0.06)',
      padding: '40px 48px 36px', position: 'relative', overflow: 'hidden',
    }}>
      {/* corner tag */}
      <div style={{ position: 'absolute', top: 0, right: 0, background: t.ink, color: '#fff', font: "600 11px/1 'Space Grotesk', Arial", padding: '6px 12px', letterSpacing: '.08em', textTransform: 'uppercase' }}>
        Letter
      </div>

      <div style={{ font: "400 14px/1 Inter, Arial", color: t.muted, marginBottom: 28 }}>Canberra  ·  21 April 2026</div>

      <Para style={{ fontSize: 20, lineHeight: 1.5, color: t.ink, fontWeight: 500, marginBottom: 28 }}>
        Hey Brett,
      </Para>

      <Para>
        It was really great connecting with you yesterday, we were really energised by the conversation and the
        opportunities this partnership could bring.
      </Para>

      <Para>
        Following the conversation, Katherine and I have consolidated our notes and have surfaced these opportunities
        for discussion. If you had other opportunities in mind, we'd love to hear them.
      </Para>

      {/* Numbered threads */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2, margin: '6px 0 26px' }}>
        <Thread
          n="01"
          tone={t.primary}
          eyebrow="Short-term consultancy"
          body="If you have a client who has a challenge that our skills could meet and they were able to take an interest in us, we are currently in a position to quickly mobilise for everyone's mutual benefit."
        />
        <Thread
          n="02"
          tone="#E8198B"
          eyebrow="Long-term strategic partnership"
          body="There are other things afoot around female founders and making sure the Australian government works with organisations that value gender equity, particularly those who are engaging with AI and new tech. As a new organisation, we haven't had an opportunity to access panels as yet, so there may be some opportunity for mutually beneficial partnership."
        />
        <Thread
          n="03"
          tone="#FFCC00"
          eyebrow="Services Australia AI coaching"
          body="You mentioned an open tender for executive coaching on AI adoption. We would welcome the chance to review it and see what we could offer. We are already doing training and coaching around AI use, grounded in APS policies, impact assessments, and the practical side of what it means for the people using the tools and the questions they should be asking."
        />
      </div>

      <Para>
        Finally, we have The Write Stuff portal. In that realm, I see a lot of opportunities for us to engage in
        genuinely different ways. There is a lot of potential benefit for Elysium here, including your existing table
        of advisors who are happy to come under the Elysium banner.
      </Para>

      <Para>
        We can retain their CVs and information through a portal they update themselves. You then run opportunities
        through the system: see who is available, with the right skills, confirm availability, generate a bio, all at
        the same time. There is also a way to leverage it for tenders. That is what it was originally designed for:
        streamlining the parts of tender writing that can be automated.
      </Para>

      <Para>
        Have a look at the two portals to see how that might feel. The second one is a worked example for Elysium,
        with three live scenarios and the adapted CVs behind each.
      </Para>

      {/* Inline portal CTAs */}
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', margin: '6px 0 26px' }}>
        <Button kind="secondary" onClick={() => goTab('tws')}>Open The Write Stuff →</Button>
        <Button kind="primary" onClick={() => goTab('epl')}>Open TWS + EPL →</Button>
      </div>

      <Para style={{ margin: '0 0 22px' }}>
        Looking forward to what comes next.
      </Para>

      {/* Signature */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, paddingTop: 22, borderTop: `1px solid ${t.rule}` }}>
        <img src="assets/headshot-sian.jpg" alt="" style={{ width: 54, height: 54, borderRadius: 999, objectFit: 'cover', border: `2px solid ${t.primaryMid}` }} />
        <div>
          <div style={{ font: "700 18px/1.1 'Space Grotesk', Arial", color: t.ink, letterSpacing: '-.01em' }}>Sian Rinaldi</div>
          <div style={{ font: "400 13px/1.4 Inter, Arial", color: t.muted }}>Co-founder, The Unordinary  ·  sian@theunordinary.co</div>
        </div>
      </div>
    </div>
  );
}

function Thread({ n, tone, eyebrow, body }) {
  const t = useBrand();
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '56px 1fr', gap: 20, padding: '16px 0', borderBottom: `1px solid ${t.rule}` }}>
      <div style={{ font: "700 28px/1 'Space Grotesk', Arial", color: tone, letterSpacing: '-.02em' }}>{n}</div>
      <div>
        <div style={{ font: "700 15px/1.3 'Space Grotesk', Arial", color: t.ink, marginBottom: 6, letterSpacing: '-.005em' }}>{eyebrow}</div>
        <div style={{ font: "400 15px/1.6 Inter, Arial", color: t.body }}>{body}</div>
      </div>
    </div>
  );
}

function DownloadRow() {
  const t = useBrand();
  const btn = {
    display: 'flex', alignItems: 'flex-start', gap: 16,
    padding: '22px 24px', borderRadius: 10, cursor: 'pointer',
    transition: 'transform .15s, box-shadow .15s',
    textAlign: 'left', border: 'none',
  };
  return (
    <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
      <button
        onClick={() => window.open('deliverables/partnership-pack.html', '_blank')}
        style={{ ...btn, background: t.ink, color: '#fff' }}
        onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 10px 24px rgba(26,26,26,0.18)'; }}
        onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}
      >
        <div style={{ width: 36, height: 36, borderRadius: 6, background: t.secondary, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v13"/><path d="m6 10 6 6 6-6"/><path d="M5 21h14"/></svg>
        </div>
        <div>
          <div style={{ font: "700 15px/1.2 'Space Grotesk', Arial", marginBottom: 6, letterSpacing: '-.005em' }}>Download a shareable version</div>
          <div style={{ font: "400 13px/1.5 Inter, Arial", color: 'rgba(255,255,255,.7)' }}>Eight-page A4 pack on warm paper. Open, read on screen, or print to PDF. Not as fun, but necessary.</div>
        </div>
      </button>
      <button
        onClick={() => window.open('deliverables/partnership-pack-print.html', '_blank')}
        style={{ ...btn, background: '#fff', color: t.ink, border: `1px solid ${t.rule}` }}
        onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 10px 24px rgba(26,26,26,0.08)'; }}
        onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}
      >
        <div style={{ width: 36, height: 36, borderRadius: 6, background: t.primaryLight, color: t.primary, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, border: `1px solid ${t.rule}` }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/><path d="M8 13h8"/><path d="M8 17h5"/></svg>
        </div>
        <div>
          <div style={{ font: "700 15px/1.2 'Space Grotesk', Arial", marginBottom: 6, letterSpacing: '-.005em' }}>Download a print-friendly pack</div>
          <div style={{ font: "400 13px/1.5 Inter, Arial", color: t.muted }}>Same content, distilled to seven pages. White paper, no colour fills. Prints cleanly on any office printer.</div>
        </div>
      </button>
    </div>
  );
}

// ------- Meet Unordinary -------
// Bold trio: unordinary People (pink), unordinary Strategy (yellow), unordinary Good (green).
// "unordinary" is lowercase; UNORDINARY is uppercase when written as the brand.

function MeetUnordinary() {
  const t = useBrand();
  return (
    <aside>
      <div style={{ font: "600 12px/1 'Space Grotesk', Arial", color: t.muted, letterSpacing: '.08em', textTransform: 'uppercase', marginBottom: 14 }}>Meet UNORDINARY</div>
      <h2 style={{ font: "700 32px/1.08 'Space Grotesk', Arial", color: t.ink, margin: '0 0 16px', letterSpacing: '-.02em' }}>
        Three forces,<br/>one operating system.
      </h2>
      <p style={{ font: "400 15px/1.65 Inter, Arial", color: t.body, margin: '0 0 28px' }}>
        We work at the system level and centre the people inside it. Good people make good strategy, good strategy
        makes good outcomes.
      </p>

      {/* Trio */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 32 }}>
        <PillarCard
          label="01"
          accent="#E8198B"
          plain="unordinary "
          strong="PEOPLE"
          body="People zooms in. Leveraging The Write Stuff we surface how people are presenting their skills, experience, personality and talents in a way that honours them in the workplace."
        />
        <PillarCard
          label="02"
          accent="#E8B700"
          plain="unordinary "
          strong="STRATEGY"
          body="Strategy zooms out. We hold three truths simultaneously when approaching a challenge: systems thinking; complexity theory; and the recognition of humanity at the core. Today’s challenges are more complex, integrated and messy than ever before. Presented with these challenges, we lean in collaborating with clients at pace to deliver considered and actionable outcomes."
        />
        <PillarCard
          label="03"
          accent="#2AB59E"
          plain="unordinary "
          strong="GOOD"
          body="Good sustains us. We operate on the principle of enough. We need enough work to keep us going, and where we are able, we reinvest the additional into those without enough. For decades we have worked with incredible NFPs, charities and community organisations, driving change where they can, within their limited resources. Seeing the profound ways that a dollar can be stretched, split and drive dividends both humbles and motivates us."
        />
      </div>

      {/* Team */}
      <div style={{ borderTop: `1px solid ${t.rule}`, paddingTop: 24 }}>
        <div style={{ font: "600 12px/1 'Space Grotesk', Arial", color: t.muted, letterSpacing: '.08em', textTransform: 'uppercase', marginBottom: 16 }}>Co-founders</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <TeamMember src="assets/headshot-sian.jpg" name="Sian Rinaldi" role="Strategic designer · AI adoption · GAICD" />
          <TeamMember src="assets/headshot-kat.jpg" name="Katherine Meagher" role="Intervention architect · Program Lead · Facilitator" />
        </div>
      </div>

      {/* Quote */}
      <div style={{ marginTop: 32, padding: '22px 22px 20px', background: t.ink, color: '#fff', borderRadius: 10, position: 'relative' }}>
        <div style={{ position: 'absolute', top: -10, left: 22, font: "700 44px/1 'Space Grotesk', Arial", color: t.secondary }}>&ldquo;</div>
        <div style={{ font: "500 15px/1.55 Inter, Arial", color: '#fff', margin: '10px 0 14px' }}>
          Today, the risks are far too great to try and uphold this broken system. We distil our activities to their
          true intent, separating what we are creating from what we are achieving and setting a shared north star from
          the very start. This enables us to authentically meet operational requirements including APS procurement
          rules and contract law, whilst maintaining the flexibility to be clever in our approach.
        </div>
        <div style={{ font: "600 12px/1 'Space Grotesk', Arial", color: t.secondary, letterSpacing: '.04em', textTransform: 'uppercase' }}>The Unordinary Experience</div>
      </div>
    </aside>
  );
}

function PillarCard({ label, accent, plain, strong, body }) {
  const t = useBrand();
  return (
    <div style={{
      background: '#fff', border: `1px solid ${t.rule}`, borderRadius: 10,
      padding: '18px 22px', position: 'relative', overflow: 'hidden',
      transition: 'transform .15s, box-shadow .15s',
    }}
    onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = `0 10px 24px ${accent}26`; }}
    onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}
    >
      <span style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 5, background: accent }} />
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 8 }}>
        <span style={{ font: "600 11px/1 'Space Grotesk', Arial", color: accent, letterSpacing: '.08em' }}>{label}</span>
        <h3 style={{ font: "700 19px/1.1 'Space Grotesk', Arial", margin: 0, letterSpacing: '-.01em' }}>
          <span style={{ color: t.ink, fontWeight: 400 }}>{plain}</span>
          <span style={{ color: accent }}>{strong}</span>
        </h3>
      </div>
      <div style={{ font: "400 14px/1.55 Inter, Arial", color: t.body }}>{body}</div>
    </div>
  );
}

function TeamMember({ src, initials, name, role }) {
  const t = useBrand();
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
      {src ? (
        <img src={src} alt="" style={{ width: 44, height: 44, borderRadius: 999, objectFit: 'cover' }} />
      ) : (
        <div style={{ width: 44, height: 44, borderRadius: 999, background: t.ink, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', font: "700 14px/1 'Space Grotesk', Arial" }}>{initials}</div>
      )}
      <div>
        <div style={{ font: "600 15px/1.2 'Space Grotesk', Arial", color: t.ink }}>{name}</div>
        <div style={{ font: "400 13px/1.35 Inter, Arial", color: t.muted }}>{role}</div>
      </div>
    </div>
  );
}

window.Home = Home;