const { Eyebrow, Button, ShapePanel, PatternField } = window.ProductsThatCountDesignSystem_86bdba;

/* Paste the live Airtable form URL here when it is published. Leave '' to show the pending state. */
const APPLICATION_URL = 'https://bit.ly/AI_PB_Fireside_App_Enhanced';
const GUIDE_URL = 'https://productsthatcount.org/opencall/ai-product-builder-applicant-guide.html';

const LOOKING_FOR = [
  ['What remains true', 'The part of the original product principle that has not moved, and why.'],
  ['What the tooling changed', 'How AI changed the tools, workflow, or operating practice you use to apply it.'],
  ['Whether the idea shifted', 'Whether the underlying mental model itself changed — or held.'],
  ['One real example', 'A specific product, team, customer workflow, or decision, with evidence behind the outcome.']
];

const STEPS = [
  ['01', 'Submit a written pitch', 'Pitch up to three of the nine topics. Each pitch covers what remains true, what the tooling changed, whether the idea shifted, and one real example with evidence.', 'Due September 9'],
  ['02', 'Two-minute video', 'Shortlisted applicants are invited to record a short video: your point of view, one thing AI changes, one thing that holds, and the example you would bring.', 'Due September 23'],
  ['03', 'Selection and agreement', 'One expert and one backup are selected per topic. Selected contributors join the Products That Count Advisory Council and complete the standard Council agreement before recording.', 'After video review'],
  ['04', 'Record the fireside', 'A 20–30 minute recorded conversation, remote, with a preparation and technical check beforehand.', 'October 13 or 14']
];

const TOPICS = [
  'Product Equation — Product-Market Fit Is a Moving Target',
  'Product-Led Growth — Think Inside and Outside the Funnel',
  'Product Formula — Beauty, Meaning, and Learning',
  'Product Stack — PM Superpowers and Tools',
  'Product Lifecycle — Adapt the Equation to Growth Stage',
  'Product Prioritization — Alignment, Portfolio, and RICE',
  'Category Design — Market-Leading Product Strategy',
  'Product-First Culture — High-Performance Teams',
  'Your Career Is a Product — Stay Sharp'
];

const DATES = [
  ['September 9', 'Written applications close'],
  ['September 23', 'Finalist videos due'],
  ['October 13–14', 'Remote recording windows']
];

const AVOID = [
  'a polished demo standing in for evidence',
  'synthetic research treated as market signal',
  'a list of tools instead of a decision',
  'a hypothetical company',
  'productivity gains with no customer, product, or business value'
];

function Rule() { return <div className="coral-rule" aria-hidden="true"></div>; }

function ApplyButton({ onColor }) {
  if (!APPLICATION_URL) {
    return (
      <div className={'apply-pending' + (onColor ? ' on-color' : '')}>
        <strong>Application opens soon</strong>
        <span>The form link will be published here.</span>
      </div>
    );
  }
  return <Button tone="primary" href={APPLICATION_URL} target="_blank" rel="noopener">Apply to contribute</Button>;
}

function Hero() {
  return (
    <PatternField pattern="diagonal" fill="teal" opacity={0.16} scale={22} lineWidth={1} className="hero">
      <div className="wrap hero-inner">
        <div className="hero-top">
          <img src="assets/logo-secondary.png" alt="Products That Count" className="logo" />
        </div>
        <Eyebrow tone="onColor" style={{ marginTop: 'var(--space-9)' }}>Open call &middot; AI Product Builder</Eyebrow>
        <h1 className="hero-h1">Help define what great<br />product leadership means<br />in the AI era.</h1>
        <p className="hero-sub">Products That Count is selecting nine practitioners &mdash; one for each topic in Strategic PM &mdash; for a recorded fireside on what AI changed in the work, and what it did not. Written applications close September 9.</p>
        <div className="hero-actions">
          <ApplyButton onColor />
          <Button tone="secondary" variant="outline" href={GUIDE_URL} target="_blank" rel="noopener" style={{ borderColor: 'var(--ptc-white)', color: 'var(--ptc-white)' }}>Read the applicant guide</Button>
        </div>
      </div>
    </PatternField>
  );
}

function Overview() {
  return (
    <section className="band band-white">
      <div className="wrap">
        <Rule />
        <Eyebrow>What this is</Eyebrow>
        <h2 className="h2">Nine topics. Nine experts. One question each.</h2>
        <p className="lead">AI Product Builder is an applied-AI layer mapped to the nine durable topics in the Strategic PM course. For each topic, one selected expert joins a 20&ndash;30 minute recorded fireside to show what happened in real product work: what stayed true, what changed in the tools and workflow, and whether the underlying product idea itself shifted.</p>
        <p className="lead">We are looking for useful disagreement, honest tradeoffs, and examples another product leader can act on &mdash; not general AI commentary. Product leaders, PMs, founders, builders, researchers, and transformation practitioners are all welcome to apply.</p>
        <div className="stat-row">
          <div className="stat"><span className="stat-n">9</span><span className="stat-l">Topics open</span></div>
          <div className="stat"><span className="stat-n">3</span><span className="stat-l">Pitches allowed per applicant</span></div>
          <div className="stat"><span className="stat-n">20&ndash;30</span><span className="stat-l">Minutes on camera</span></div>
        </div>
      </div>
    </section>
  );
}

function LookingFor() {
  return (
    <section className="band band-canvas">
      <div className="wrap">
        <Rule />
        <Eyebrow>What a strong pitch holds</Eyebrow>
        <h2 className="h2">Four things, at the same time.</h2>
        <div className="four">
          {LOOKING_FOR.map(([h, b], i) => (
            <div className="four-card" key={i}>
              <span className="four-n">{String(i + 1).padStart(2, '0')}</span>
              <h3 className="four-h">{h}</h3>
              <p className="four-b">{b}</p>
            </div>
          ))}
        </div>
        <ShapePanel shape="banner" pad="var(--space-6)" style={{ background: 'var(--ptc-coral-red)', color: 'var(--ptc-white)', marginTop: 'var(--space-8)', paddingBottom: 'var(--space-8)', maxWidth: '760px' }}>
          <Eyebrow tone="onColor">Avoid pitches that rest on</Eyebrow>
          <ul className="avoid-list">{AVOID.map((a, i) => <li key={i}>{a}</li>)}</ul>
        </ShapePanel>
      </div>
    </section>
  );
}

function Process() {
  return (
    <section className="band band-white">
      <div className="wrap">
        <Rule />
        <Eyebrow>The process</Eyebrow>
        <h2 className="h2">Four steps, written pitch first.</h2>
        <p className="lead">Selection is a two-step review: a written pitch for everyone, then a short video for finalists. Applying does not guarantee selection.</p>
        <ol className="steps">
          {STEPS.map(([n, h, b, when]) => (
            <li className="step" key={n}>
              <span className="step-n">{n}</span>
              <div className="step-body">
                <h3 className="step-h">{h}</h3>
                <p className="step-b">{b}</p>
              </div>
              <span className="step-when">{when}</span>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function Dates() {
  return (
    <section className="band band-forest">
      <div className="wrap">
        <Eyebrow tone="onColor">Dates to hold</Eyebrow>
        <h2 className="h2 inv">Three dates decide everything.</h2>
        <div className="dates">
          {DATES.map(([d, l]) => (
            <div className="date" key={d}>
              <span className="date-d">{d}</span>
              <span className="date-l">{l}</span>
            </div>
          ))}
        </div>
        <p className="lead inv" style={{ marginTop: 'var(--space-7)' }}>The application asks which recording window you can support. Recording dates are fixed; please only apply if one of them works for you.</p>
      </div>
    </section>
  );
}

function Topics() {
  return (
    <section className="band band-canvas">
      <div className="wrap">
        <Rule />
        <Eyebrow>Choose up to three</Eyebrow>
        <h2 className="h2">The nine topics.</h2>
        <p className="lead">Each topic extends an existing Strategic PM principle rather than replacing it. The applicant guide summarizes the original material for every topic, so you can build a pitch without watching the course.</p>
        <ol className="topics">
          {TOPICS.map((t, i) => (
            <li className="topic" key={i}><span className="topic-n">{String(i + 1).padStart(2, '0')}</span><span className="topic-t">{t}</span></li>
          ))}
        </ol>
        <div className="topics-cta"><Button tone="secondary" href={GUIDE_URL} target="_blank" rel="noopener">Read the applicant guide</Button></div>
      </div>
    </section>
  );
}

function Recognition() {
  return (
    <section className="band band-white">
      <div className="wrap">
        <Rule />
        <Eyebrow>If you are selected</Eyebrow>
        <h2 className="h2">Advisory Council membership, and a well-prepared conversation.</h2>
        <div className="rec">
          <ul className="rec-list">
            <li>Contribution is recognized through Products That Count Advisory Council membership. The program does not offer course credits, payment, or endorsements.</li>
            <li>Selected contributors complete the standard Advisory Council agreement before recording.</li>
            <li>You get a preparation conversation and technical check before the fireside, and may bring one or two slides.</li>
            <li>Please do not include confidential, customer-identifying, or employer-restricted information in an application or a recording.</li>
            <li>One expert and one backup are selected per topic; strong applications may be kept for a future refresh with your permission.</li>
          </ul>
        </div>
      </div>
    </section>
  );
}

function Closing() {
  return (
    <section className="band band-teal">
      <div className="wrap closing">
        <Eyebrow tone="onColor">Ready</Eyebrow>
        <h2 className="h2 inv">Bring one real example and a clear point of view.</h2>
        <div className="hero-actions">
          <ApplyButton onColor />
          <Button tone="secondary" variant="outline" href={GUIDE_URL} target="_blank" rel="noopener" style={{ borderColor: 'var(--ptc-white)', color: 'var(--ptc-white)' }}>Read the applicant guide</Button>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <React.Fragment>
      <Hero />
      <Overview />
      <LookingFor />
      <Process />
      <Dates />
      <Topics />
      <Recognition />
      <Closing />
      <footer className="foot">
        <div className="wrap foot-inner">
          <div className="foot-plate"><img src="assets/logo-secondary.png" alt="Products That Count" className="foot-logo" /></div>
          <p className="foot-note">AI Product Builder expert open call. Applying does not guarantee selection.</p>
        </div>
      </footer>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);