/* SKOPIA Landing — Remaining sections (Trust, CTA, Footer) + app composition
   AI section lives in helios.jsx as <HeliosSection />
*/

/* =========================================================
   TRUST / SOCIAL PROOF
   ========================================================= */
const Trust = () => {
  return (
    <section className="section-pad" id="trust" style={{ background: '#fff', borderTop: '1px solid #E8ECF6', borderBottom: '1px solid #E8ECF6' }}>
      <div className="container">
        <Reveal>
          <SectionHeader
            align="center"
            eyebrow="Trust"
            title={<>Designed in Australia.<br /><span className="grad-text">Trusted on real sites.</span></>}
            lede="From principal contractors to sub-contractors, SKOPIA is the schedule intelligence layer for teams who'd rather build than babysit software." />
          
        </Reveal>

        {/* Designed in Australia ribbon */}
        <Reveal delay={120}>
          <div style={{
            marginTop: 56, padding: '20px 28px',
            background: 'linear-gradient(135deg, rgba(30,200,212,0.06), rgba(74,111,232,0.06))',
            border: '1px solid rgba(74,111,232,0.18)',
            borderRadius: 4,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap'
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <Icon name="globe" size={26} color="#2A4DCC" />
              <div>
                <div style={{ fontFamily: 'var(--font-head)', fontWeight: 900, fontSize: 16, color: '#1A1A2E' }}>Designed in Australia.</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#6B7280' }}>Australian-hosted data residency. AUD pricing. AEDT support hours.</div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 14, fontFamily: 'var(--font-mono)', fontSize: 11, color: '#6B7280' }}>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

};

/* =========================================================
   FINAL CTA
   ========================================================= */
const FinalCTA = () =>
<section className="section-pad" id="cta" style={{ position: 'relative', overflow: 'hidden', background: '#1E1E1E' }}>
    {/* Animated gradient mesh */}
    <div aria-hidden="true" style={{ position: 'absolute', inset: 0 }}>
      <div className="orb-bg" style={{ width: 800, height: 800, top: -200, left: '-10%', background: 'radial-gradient(closest-side, rgba(30,200,212,0.45), transparent 70%)', animation: 'drift 18s ease-in-out infinite' }} />
      <div className="orb-bg" style={{ width: 900, height: 900, bottom: -300, right: '-15%', background: 'radial-gradient(closest-side, rgba(74,111,232,0.5), transparent 70%)', animation: 'drift 22s ease-in-out infinite reverse' }} />
      <div className="orb-bg" style={{ width: 600, height: 600, top: '20%', left: '40%', background: 'radial-gradient(closest-side, rgba(106,63,204,0.35), transparent 70%)' }} />
      {/* Subtle grid */}
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.15 }}>
        <defs>
          <pattern id="cta-grid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#fff" strokeWidth="0.5" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#cta-grid)" />
      </svg>
    </div>

    <div className="container" style={{ position: 'relative', zIndex: 2, textAlign: 'center' }}>
      <Reveal>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 28 }}>
          <LogoMark size={56} />
        </div>
      </Reveal>
      <Reveal delay={80}>
        <h2 className="h-section" style={{ color: '#fff', maxWidth: 880, margin: '0 auto 20px', fontSize: 'clamp(36px, 5.4vw, 68px)' }}>
          Start with Lens. <span className="grad-text">Scale to Track.</span>
        </h2>
      </Reveal>
      <Reveal delay={140}>
        <p className="lede" style={{ color: 'rgba(255,255,255,0.75)', margin: '0 auto 36px', textAlign: 'center', maxWidth: 620 }}>
          Free schedule health check in your browser. No card, no install, no enterprise sales call.
        </p>
      </Reveal>
      <Reveal delay={200}>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Btn variant="on-dark" href="https://app.skopia.com.au/">Launch free analysis <Icon name="arrow" size={14} stroke={2.2} /></Btn>
          <Btn variant="ghost-dark" href="#pricing">Compare plans</Btn>
        </div>
      </Reveal>
      <Reveal delay={260}>
        <div style={{ marginTop: 28, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'rgba(255,255,255,0.45)' }}>
          <span style={{ color: '#1EC8D4' }}>$</span> open SKOPIA Lens · upload schedule native · grade arrives in 60s
        </div>
      </Reveal>
    </div>
  </section>;


/* =========================================================
   FOOTER
   ========================================================= */
const Footer = () => {
  const groups = [
  { h: 'Products', href: '#pricing', hrefMap: { 'Quick Start': 'quickstart.html' }, l: ['SKOPIA Lens', 'SKOPIA Lens Pro', ['SKOPIA Build', 'Coming soon'], ['SKOPIA Track', 'Coming soon'], 'Quick Start'] },
  { h: 'Legal', hrefMap: { 'Privacy': 'privacy.html', 'Terms': 'terms.html', 'Contact': '#contact', 'Status': '#status' }, l: ['Privacy', 'Terms', 'Contact', 'Status'] }];


  return (
    <footer style={{ background: '#1E1E1E', color: 'rgba(255,255,255,0.7)', paddingTop: 80, paddingBottom: 40, position: 'relative', overflow: 'hidden' }}>
      <GradBar />
      <div className="container" style={{ marginTop: 40 }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 1.6fr) repeat(2, 1fr)', gap: 40
        }} className="footer-grid">
          {/* Brand block */}
          <div>
            <Logo size={32} color="#fff" />
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.7, color: 'rgba(255,255,255,0.55)', marginTop: 18, maxWidth: 320 }}>
              Project controls software built for real contractors. Schedule intelligence. Built different.
            </p>
            <div style={{ marginTop: 20 }}>
              <a
                href="https://www.linkedin.com/company/116614138/admin/dashboard/"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="SKOPIA on LinkedIn"
                style={{
                  width: 30, height: 30, borderRadius: 6,
                  border: '1px solid rgba(255,255,255,0.12)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  color: 'rgba(255,255,255,0.85)',
                  transition: 'background .15s, color .15s, border-color .15s'
                }}
                onMouseEnter={(e) => { e.currentTarget.style.background = '#0A66C2'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = '#0A66C2'; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'rgba(255,255,255,0.85)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.12)'; }}
              >
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.95v5.66H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.56V9h3.56v11.45zM22.23 0H1.77C.79 0 0 .78 0 1.73v20.54C0 23.22.79 24 1.77 24h20.46c.98 0 1.77-.78 1.77-1.73V1.73C24 .78 23.21 0 22.23 0z" />
                </svg>
              </a>
            </div>
            <div style={{ marginTop: 20, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(255,255,255,0.4)' }}>
              Made in Perth · v1.0
            </div>
          </div>

          {groups.map((g) =>
          <div key={g.h}>
              <div style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 10, letterSpacing: 2, color: '#fff', marginBottom: 16, textTransform: 'uppercase' }}>{g.h}</div>
              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {g.l.map((item) => {
                const [label, badge] = Array.isArray(item) ? item : [item, null];
                return (
                  <li key={label}>
                      <a href={g.hrefMap?.[label] ?? g.href ?? `#${label.toLowerCase().replace(/\s/g, '-')}`} style={{
                      fontFamily: 'var(--font-body)', fontSize: 13, color: 'rgba(255,255,255,0.6)',
                      display: 'inline-flex', alignItems: 'center', gap: 8,
                      transition: 'color .15s'
                    }}
                    onMouseEnter={(e) => e.currentTarget.style.color = '#fff'}
                    onMouseLeave={(e) => e.currentTarget.style.color = 'rgba(255,255,255,0.6)'}>
                        {label}
                        {badge && <span style={{
                        padding: '2px 6px', borderRadius: 999,
                        background: 'rgba(30,200,212,0.15)', color: '#1EC8D4',
                        fontFamily: 'var(--font-head)', fontSize: 9, fontWeight: 700, letterSpacing: 0.5
                      }}>{badge.toUpperCase()}</span>}
                      </a>
                    </li>);

              })}
              </ul>
            </div>
          )}
        </div>

        <div style={{
          marginTop: 56, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.08)',
          display: 'flex', justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap', gap: 16
        }}>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'rgba(255,255,255,0.45)' }}>
            © 2026 SKOPIA Apps. All rights reserved. AUD prices include GST.
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 540px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>);

};

/* =========================================================
   APP COMPOSITION
   ========================================================= */
const App = () =>
<>
    <Nav />
    <main>
      <Hero />
      <Problem />
      <Workflow />
      <Pricing />
      <WhyBento />
      <HeliosSection />
      <Tour />
      <Trust />
      <FinalCTA />
    </main>
    <Footer />
    <ContactModal />
  </>;


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