// HomeV4.jsx — the abbreviated homepage. Exactly three sections.
// 01 Core statement · 02 Sectors · 03 Portfolio (preview).

const AXV_HEADLINES = {
  mission:   ['We back the companies', 'the future is built on.'],
  operators: ['Operators and capital', 'for deep technology.'],
  power:     ['The deep tech that decides', 'what comes next.'],
  built:     ['Built by operators.', 'Backed for the frontier.'],
};

// Sectors — five theses, each with a small duotone image accent.
// Accents use secondary frames so no scene repeats within the homepage.
const AXV_SECTORS = [
  { k: '01', t: 'Autonomy', d: 'Aerial, ground, and maritime systems that sense, decide, and act under real conditions.', img: 'assets/portfolio/asylon-robodog.jpg', pos: 'center 42%' },
  { k: '02', t: 'Artificial Intelligence', d: 'Perception models and the silicon behind them, moving out of the data center to the edge and onto the platform.', img: 'assets/portfolio/cyvl.jpg', pos: 'center 38%' },
  { k: '03', t: 'Robotics', d: 'Machines that work in the physical world \u2014 on the factory floor, the flight line, and in the field.', img: 'assets/portfolio/wilder-systems.jpg', pos: 'center 60%' },
  { k: '04', t: 'Aviation & Aerospace', d: 'New airframes and propulsion changing how things fly and reach orbit.', img: 'assets/portfolio/whisper-aero.jpg', pos: 'center 46%' },
  { k: '05', t: 'Space Infrastructure', d: 'Servicing, logistics, and the orbital backbone that keeps assets useful in space.', img: 'assets/portfolio/starfish-space.jpg', pos: 'center 50%' },
];

function HomeV4({ headline = 'mission', setPage }) {
  const hl = AXV_HEADLINES[headline] || AXV_HEADLINES.mission;

  return (
    <>
      {/* 01 — CORE STATEMENT */}
      <section className="core" data-screen-label="01 Core statement">
        <div className="core-top">
          <span className="sec-eyebrow">Aero X Ventures</span>
          <span className="core-index">Deep tech venture capital</span>
        </div>
        <h1 className="core-headline">
          {hl[0]}<br />
          <span className="soft">{hl[1]}</span>
        </h1>
      </section>

      {/* 02 — SECTORS */}
      <section className="sectors" data-screen-label="02 Sectors">
        <div className="wrap">
          <div className="sectors-hd">
            <div>
              <span className="sec-eyebrow" style={{ marginBottom: 18, display: 'inline-flex' }}>Where we invest</span>
              <h2 className="reveal">Five areas of deep tech we back.</h2>
            </div>
            <span className="sectors-count">01 — 05</span>
          </div>
          <div className="sectors-grid">
            {AXV_SECTORS.map(s => (
              <article className="sector" key={s.k}>
                <div className="sector-fig">
                  <img src={window.R(s.img)} alt="" loading="lazy" style={{ objectPosition: s.pos }} />
                </div>
                <div className="sector-body">
                  <div className="sector-k">{s.k}</div>
                  <h3 className="sector-t">{s.t}</h3>
                  <p className="sector-d">{s.d}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* 03 — PORTFOLIO (preview) */}
      <PortfolioSurface preview setPage={setPage} />
    </>
  );
}
window.HomeV4 = HomeV4;