/* Homepage-specific components & overrides.
   Reuses kit components where they match the brief; overrides Hero + Stats + CaseStudyFeature + CtaBanner to match exact copy. */

/* ---------- Hero (brief copy, scroll indicator, dual CTA) ---------- */
function HomeHero({ onRequestDemo }) {
  return (
    <section className="h-hero" style={{
      position: 'relative', overflow: 'hidden',
      background: '#0F1E3D', color: '#FAFBFC',
      minHeight: 'calc(100vh - 72px)',
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(assets/photo-placeholder.svg)',
        backgroundSize: 'cover', backgroundPosition: 'center',
        opacity: 0.9,
      }}/>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(100deg, rgba(15,30,61,0.94) 0%, rgba(15,30,61,0.72) 45%, rgba(15,30,61,0.32) 100%)',
      }}/>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(assets/pattern-topo.svg)',
        backgroundSize: '800px auto', opacity: 0.16, mixBlendMode: 'screen',
      }}/>

      <div className="h-hero__inner" style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: '96px 32px', width: '100%' }}>
        <div className="h-hero__eyebrow" style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 12, fontWeight: 600,
          letterSpacing: '0.14em', textTransform: 'uppercase', color: '#F4B08F', marginBottom: 20,
          display: 'inline-flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#E8753D' }}/>
          AusMotion Robotics · Perth · Sydney · Brisbane
        </div>
        <h1 className="h-hero__h1" style={{
          fontFamily: 'Inter', fontSize: 76, fontWeight: 800, lineHeight: 1.02,
          letterSpacing: '-0.035em', margin: 0, maxWidth: 1040, color: '#FAFBFC',
          textWrap: 'balance',
        }}>
          World-class robotics, built for <span style={{ color: '#E8753D' }}>Australian conditions</span>.
        </h1>
        <p className="h-hero__lede" style={{
          fontFamily: 'Inter', fontSize: 20, lineHeight: 1.55,
          color: 'rgba(250,251,252,0.82)', marginTop: 28, maxWidth: 680, marginBottom: 40,
        }}>
          We localize, deploy, and support advanced robots across Australia's most demanding industries — from mine sites to coastlines to care homes.
        </p>
        <div className="h-hero__ctas" style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Button size="lg" href="#industries" as="a" iconRight={<Icons.ChevronRight size={16}/>}>Explore industries</Button>
          <Button size="lg" variant="secondary-light" onClick={onRequestDemo} iconRight={<Icons.Arrow size={16}/>}>Book a demo</Button>
        </div>
      </div>

      {/* Bottom info + scroll indicator */}
      <div className="h-hero__strip" style={{
        position: 'relative', borderTop: '1px solid rgba(255,255,255,0.12)',
        padding: '20px 32px', display: 'flex', gap: 48, flexWrap: 'wrap', alignItems: 'center',
        maxWidth: 1280, margin: '0 auto', width: '100%',
        fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.12em',
        textTransform: 'uppercase', color: 'rgba(250,251,252,0.6)',
      }}>
        <span><span style={{ color: '#E8753D' }}>◆</span>&nbsp; AS/NZS compliant</span>
        <span>Rental · Purchase · Managed service</span>
        <span>6 industries · 14 platforms</span>
        <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 10 }}>
          Scroll to explore
          <span style={{
            display: 'inline-block', width: 18, height: 28, border: '1px solid rgba(250,251,252,0.35)',
            borderRadius: 10, position: 'relative',
          }}>
            <span style={{
              position: 'absolute', left: '50%', top: 6, width: 2, height: 6,
              background: '#E8753D', transform: 'translateX(-50%)',
              animation: 'scrollDot 1.8s cubic-bezier(0.2,0,0,1) infinite',
            }}/>
          </span>
        </span>
      </div>

      <style>{`
        @keyframes scrollDot {
          0% { transform: translate(-50%, 0); opacity: 1; }
          70% { transform: translate(-50%, 10px); opacity: 0; }
          100% { transform: translate(-50%, 0); opacity: 0; }
        }
      `}</style>
    </section>
  );
}

/* ---------- Industries grid — brief-exact heading + intro ---------- */
function HomeIndustries({ onPick }) {
  return (
    <section id="industries" className="h-industries" style={{ padding: '120px 32px 96px', background: '#FAFBFC' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ fontFamily: 'Inter', fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 12 }}>
          Industries we serve
        </div>
        <h2 className="h-h2" style={{ fontFamily: 'Inter', fontSize: 48, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.08, color: '#0A0F1A', margin: 0, maxWidth: 800, textWrap: 'balance' }}>
          Six industries. One trusted partner.
        </h2>
        <p className="h-lede" style={{ fontFamily: 'Inter', fontSize: 17, lineHeight: 1.6, color: '#56606E', maxWidth: 620, marginTop: 20, marginBottom: 56 }}>
          From the Pilbara to the Pacific coastline, we deploy robots tuned to your site conditions, workflow, and the Australian standards that apply to your sector.
        </p>
        <div className="h-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {INDUSTRIES.map(ind => <IndustryCard key={ind.id} ind={ind} onClick={onPick}/>)}
        </div>
      </div>
    </section>
  );
}

/* ---------- Three pillars — brief-exact copy ---------- */
function HomePillars() {
  const pillars = [
    {
      Icon: Icons.Compass,
      t: 'Australian-tuned localization',
      b: "Our robots are adapted for Australian climate, terrain, regulations, and standards. From AS/NZS compliance to local language support, every deployment is built for here.",
    },
    {
      Icon: Icons.Package,
      t: 'Flexible rental or purchase',
      b: "Test before you commit. Scale up for seasonal needs. Or own outright with full lifecycle support. Engagement models that match real operational reality.",
    },
    {
      Icon: Icons.Wrench,
      t: 'End-to-end lifecycle support',
      b: "Deployment, training, maintenance, upgrades, and 24/7 support — all from an Australian team that knows your environment.",
    },
  ];
  return (
    <section className="h-pillars" style={{ padding: '120px 32px', background: '#fff' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ fontFamily: 'Inter', fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 12 }}>
          Why AusMotion
        </div>
        <h2 className="h-h2" style={{ fontFamily: 'Inter', fontSize: 48, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.08, color: '#0A0F1A', margin: 0, maxWidth: 820, textWrap: 'balance' }}>
          Why Australian operators choose AusMotion.
        </h2>
        <div className="h-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, marginTop: 72 }}>
          {pillars.map((p, i) => (
            <div key={p.t} style={{ borderTop: '2px solid #0F1E3D', paddingTop: 24 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
                <div style={{ width: 40, height: 40, borderRadius: 4, background: '#FBE4D6', color: '#B85420', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <p.Icon size={22}/>
                </div>
                <div style={{ fontFamily: 'JetBrains Mono', fontSize: 12, fontWeight: 600, color: '#7B8593', letterSpacing: '0.12em' }}>0{i + 1}</div>
              </div>
              <h3 style={{ fontFamily: 'Inter', fontSize: 24, fontWeight: 600, letterSpacing: '-0.015em', color: '#0A0F1A', margin: '0 0 12px' }}>{p.t}</h3>
              <p style={{ fontFamily: 'Inter', fontSize: 15, lineHeight: 1.65, color: '#56606E', margin: 0 }}>{p.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Partner logo strip — with hover from gray to color ---------- */
function HomePartnerStrip() {
  return (
    <section style={{ padding: '64px 32px', borderTop: '1px solid #E6EAF0', borderBottom: '1px solid #E6EAF0', background: '#FAFBFC' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{
          fontFamily: 'JetBrains Mono', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em',
          textTransform: 'uppercase', color: '#7B8593', textAlign: 'center', marginBottom: 28,
        }}>
          Trusted technology partners
        </div>
        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', justifyContent: 'space-around', alignItems: 'center' }}>
          {[1,2,3,4,5].map(i => (
            <img key={i} src="assets/partner-tile-placeholder.svg" alt="Partner logo placeholder"
                 className="partner-logo"
                 style={{ height: 44, filter: 'grayscale(1)', opacity: 0.6, transition: 'all 220ms cubic-bezier(0.2,0,0,1)' }}/>
          ))}
        </div>
      </div>
      <style>{`
        .partner-logo:hover { filter: grayscale(0) !important; opacity: 1 !important; }
      `}</style>
    </section>
  );
}

/* ---------- Case study — brief-exact headline + 3 stat row ---------- */
function HomeCaseStudy() {
  return (
    <section className="h-case" style={{ padding: '120px 32px', background: '#F3F5F8' }}>
      <div className="h-case__grid" style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 64, alignItems: 'center' }}>
        <div style={{ position: 'relative', borderRadius: 8, overflow: 'hidden', aspectRatio: '4/3', border: '1px solid #E6EAF0' }}>
          <img src="assets/case-pilbara-postblast.jpg" alt="Pilbara post-blast inspection deployment" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
          <div style={{ position: 'absolute', inset: 'auto 0 0 0', height: '55%', background: 'linear-gradient(to top, rgba(15,30,61,0.88), rgba(15,30,61,0))' }}/>
          <div style={{ position: 'absolute', left: 24, right: 24, bottom: 22, color: '#FAFBFC' }}>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#F4B08F', fontWeight: 600 }}>Iron Bridge · WA</div>
            <div style={{ fontFamily: 'Inter', fontSize: 19, fontWeight: 600, marginTop: 6 }}>Post-blast quadruped inspection</div>
          </div>
        </div>
        <div>
          <div style={{ fontFamily: 'Inter', fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 12 }}>
            Case study
          </div>
          <h2 className="h-case__h2" style={{ fontFamily: 'Inter', fontSize: 38, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.12, color: '#0A0F1A', margin: 0, textWrap: 'balance' }}>
            How a Pilbara iron ore operator cut post-blast re-entry time by 76% with autonomous quadruped patrols.
          </h2>
          <p style={{ fontFamily: 'Inter', fontSize: 16, lineHeight: 1.65, color: '#3A424D', marginTop: 20 }}>
            Two units across three pits replaced human first-entry inspection. The twelve-month pilot is now in full rollout across the site.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 32, paddingTop: 28, borderTop: '1px solid #D2D8E0' }}>
            {[
              { n: '76%', l: 'Faster re-entry' },
              { n: '0', l: 'Safety incidents' },
              { n: '2 / 3', l: 'Units across pits' },
            ].map(s => (
              <div key={s.l}>
                <div style={{ fontFamily: 'Inter', fontSize: 36, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1, color: '#0A0F1A' }}>{s.n}</div>
                <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#56606E', marginTop: 10 }}>{s.l}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 32 }}>
            <Button variant="tertiary" iconRight={<Icons.Arrow size={14}/>}>Read the full case study</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Proof stats band — brief-exact 4 stats ---------- */
function HomeStats() {
  const stats = [
    { n: '200+', l: 'Deployments' },
    { n: '6',    l: 'Industries served' },
    { n: '24/7', l: 'Australian support' },
    { n: '100%', l: 'Locally compliant' },
  ];
  return (
    <section className="h-stats" style={{
      padding: '88px 32px', background: '#0F1E3D', color: '#FAFBFC', position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(assets/pattern-topo.svg)',
        backgroundSize: '600px auto', opacity: 0.12, mixBlendMode: 'screen',
      }}/>
      <div className="h-stats__grid" style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
        {stats.map((s, i) => (
          <div key={s.l} className="h-stat" style={{
            borderLeft: i === 0 ? 'none' : '1px solid rgba(255,255,255,0.12)',
            paddingLeft: i === 0 ? 0 : 32,
          }}>
            <div className="h-stat__n" style={{ fontFamily: 'Inter', fontSize: 64, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1, color: '#FAFBFC' }}>{s.n}</div>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 12, fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#F4B08F', marginTop: 14 }}>{s.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- CTA banner — accent background, brief copy ---------- */
function HomeCtaBanner({ onRequestDemo }) {
  return (
    <section className="h-cta" style={{
      background: 'linear-gradient(95deg, #D4652E 0%, #E8753D 55%, #EE9264 100%)',
      color: '#FAFBFC', padding: '96px 32px', position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(assets/pattern-topo.svg)',
        backgroundSize: '700px auto', opacity: 0.14, mixBlendMode: 'overlay',
      }}/>
      <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
        <h2 className="h-cta__h2" style={{ fontFamily: 'Inter', fontSize: 56, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.05, color: '#FAFBFC', margin: 0, textWrap: 'balance' }}>
          Ready to see what's possible?
        </h2>
        <p style={{ fontFamily: 'Inter', fontSize: 19, lineHeight: 1.55, color: 'rgba(255,255,255,0.92)', marginTop: 20, maxWidth: 720, marginInline: 'auto', marginBottom: 36 }}>
          Book a 30-minute demo with our specialists. We'll show you the right robots for your environment.
        </p>
        <button onClick={onRequestDemo} style={{
          fontFamily: 'Inter', fontWeight: 600, fontSize: 16, padding: '16px 28px',
          background: '#0F1E3D', color: '#FAFBFC', border: '1px solid #0F1E3D',
          borderRadius: 4, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10,
          transition: 'all 140ms cubic-bezier(0.2,0,0,1)',
          boxShadow: '0 4px 12px rgba(10,15,26,0.18)',
        }}
          onMouseEnter={e => { e.currentTarget.style.background = '#1B2F5C'; }}
          onMouseLeave={e => { e.currentTarget.style.background = '#0F1E3D'; }}>
          Book a demo <Icons.Arrow size={16}/>
        </button>
      </div>
    </section>
  );
}

/* ---------- Homepage app shell ---------- */
function HomepageApp() {
  const [demoOpen, setDemoOpen] = React.useState(false);
  const [industry, setIndustry] = React.useState(null);
  const [toast, setToast] = React.useState('');

  React.useEffect(() => {
    if (!toast) return;
    const t = setTimeout(() => setToast(''), 3200);
    return () => clearTimeout(t);
  }, [toast]);

  return (
    <div data-screen-label="Homepage">
      <Nav onRequestDemo={() => setDemoOpen(true)} onIndustry={setIndustry}/>
      <HomeHero onRequestDemo={() => setDemoOpen(true)}/>
      <HomeIndustries onPick={setIndustry}/>
      <HomePillars/>
      <HomePartnerStrip/>
      <HomeCaseStudy/>
      <HomeStats/>
      <HomeCtaBanner onRequestDemo={() => setDemoOpen(true)}/>
      <Footer/>

      <InquiryModal
        open={demoOpen}
        onClose={() => { setDemoOpen(false); setToast("Inquiry sent. We'll reply within one business day."); }}
      />

      {industry && (
        <div role="dialog" aria-modal="true" style={{
          position: 'fixed', inset: 0, zIndex: 90, background: 'rgba(10,15,26,0.55)',
          display: 'flex', justifyContent: 'flex-end',
        }} onClick={() => setIndustry(null)}>
          <aside onClick={e => e.stopPropagation()} style={{
            width: 520, maxWidth: '100%', height: '100%', background: '#fff',
            display: 'flex', flexDirection: 'column',
            boxShadow: '-24px 0 60px rgba(10,15,26,0.18)',
          }}>
            <div style={{ padding: 24, borderBottom: '1px solid #E6EAF0', display: 'flex', alignItems: 'flex-start', gap: 16 }}>
              <div style={{ width: 44, height: 44, borderRadius: 4, background: '#FBE4D6', color: '#B85420', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <industry.Icon size={22}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#E8753D' }}>Industry</div>
                <h3 style={{ fontFamily: 'Inter', fontSize: 24, fontWeight: 600, letterSpacing: '-0.015em', color: '#0A0F1A', margin: '4px 0 0' }}>{industry.name}</h3>
              </div>
              <button aria-label="Close" onClick={() => setIndustry(null)} style={{ background: 'transparent', border: 'none', color: '#56606E', cursor: 'pointer', padding: 4 }}>
                <Icons.X size={20}/>
              </button>
            </div>
            <div style={{ padding: 24, overflowY: 'auto', flex: 1 }}>
              <p style={{ fontFamily: 'Inter', fontSize: 18, lineHeight: 1.5, color: '#0A0F1A', fontWeight: 500, margin: 0 }}>{industry.painPoint}</p>
              <p style={{ fontFamily: 'Inter', fontSize: 15, lineHeight: 1.6, color: '#3A424D', marginTop: 14 }}>
                {industry.tagline} Our team commissions the platform on your site, trains operators, and supports the fleet under a service-level agreement.
              </p>
              <div style={{ marginTop: 24, borderTop: '1px solid #E6EAF0', paddingTop: 20 }}>
                <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#7B8593', marginBottom: 12 }}>Typical deployment</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {['Site survey and use-case scoping', '4–6 week paid pilot', 'Operator training on-site', 'Managed service or outright purchase'].map(x => (
                    <li key={x} style={{ display: 'flex', gap: 10, fontFamily: 'Inter', fontSize: 14, color: '#121721' }}>
                      <span style={{ color: '#2E8B5F', marginTop: 2 }}><Icons.Check size={16}/></span>{x}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
            <div style={{ padding: 20, borderTop: '1px solid #E6EAF0', background: '#FAFBFC', display: 'flex', gap: 10 }}>
              <Button onClick={() => { setIndustry(null); setDemoOpen(true); }}>Request a demo</Button>
              <Button variant="secondary" onClick={() => setIndustry(null)}>Close</Button>
            </div>
          </aside>
        </div>
      )}

      {toast && (
        <div style={{
          position: 'fixed', right: 24, bottom: 24, zIndex: 200,
          background: '#0A0F1A', color: '#FAFBFC', padding: '14px 18px',
          borderRadius: 8, boxShadow: '0 12px 32px rgba(10,15,26,0.25)',
          fontFamily: 'Inter', fontSize: 14, display: 'flex', alignItems: 'center', gap: 10,
          maxWidth: 360,
        }}>
          <span style={{ color: '#2E8B5F' }}><Icons.Check size={18}/></span>
          {toast}
        </div>
      )}
    </div>
  );
}

window.HomepageApp = HomepageApp;
