// Features, live preview, steps, pricing, comparison, FAQ, CTA, footer
const { useState: useStateF } = React;

function LogoMarquee() { return null; }

// Removed Features section
function Features() { return null; }

function Live() {
  return (
    <section className="section" id="lab" style={{ background: 'linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)' }}>
      <style>{`
        .live-wrap {
          display: grid;
          grid-template-columns: 1.1fr 0.9fr;
          gap: 28px;
          align-items: stretch;
        }

        .live-panel {
          background: #fff;
          border: 1px solid var(--border, #e5e7eb);
          border-radius: 24px;
          box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
          overflow: hidden;
        }

        .live-copy {
          padding: 44px 42px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          position: relative;
          background:
            radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 34%),
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        }

        .live-copy h2 {
          font-size: clamp(2rem, 4vw, 3.1rem);
          line-height: 1.03;
          letter-spacing: -0.05em;
          margin: 14px 0 18px;
          max-width: 10ch;
        }

        .live-copy h2 em {
          font-style: normal;
          color: var(--blue-500, #2563eb);
        }

        .live-copy .lead {
          font-size: 1.02rem;
          line-height: 1.8;
          color: var(--muted, #64748b);
          max-width: 62ch;
          margin: 0 0 14px;
        }

        .live-copy .lead strong {
          color: var(--ink, #0f172a);
          font-weight: 700;
        }

        .live-badges {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          margin-top: 24px;
        }

        .live-badge {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 9px 12px;
          border-radius: 999px;
          border: 1px solid #dbeafe;
          background: #eff6ff;
          color: #1d4ed8;
          font-size: 0.84rem;
          font-weight: 700;
        }

        .live-right {
          padding: 22px;
          background:
            radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 30%),
            linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .live-card {
          background: rgba(255,255,255,0.82);
          backdrop-filter: blur(14px);
          border: 1px solid rgba(191, 219, 254, 0.7);
          border-radius: 22px;
          padding: 24px;
          box-shadow: 0 10px 30px rgba(37, 99, 235, 0.08);
        }

        .live-card-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16px;
          margin-bottom: 18px;
        }

        .live-card-head h3 {
          font-size: 1.05rem;
          margin: 0;
          letter-spacing: -0.02em;
        }

        .live-card-head .pill {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          padding: 7px 11px;
          border-radius: 999px;
          background: #0f172a;
          color: #fff;
          font-size: 0.76rem;
          font-weight: 700;
          letter-spacing: 0.02em;
        }

        .live-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 12px;
        }

        .live-tile {
          border-radius: 16px;
          background: #fff;
          border: 1px solid #dbeafe;
          padding: 16px 16px 15px;
          min-height: 118px;
          box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
        }

        .live-tile .kicker {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-size: 0.76rem;
          font-weight: 800;
          color: #2563eb;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          margin-bottom: 10px;
        }

        .live-tile h4 {
          font-size: 0.98rem;
          line-height: 1.25;
          margin: 0 0 7px;
          color: var(--ink, #0f172a);
        }

        .live-tile p {
          margin: 0;
          font-size: 0.84rem;
          line-height: 1.55;
          color: var(--muted, #64748b);
        }

        .live-bottom {
          margin-top: 14px;
          border-radius: 18px;
          padding: 16px 18px;
          background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%);
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
        }

        .live-bottom strong {
          font-size: 0.92rem;
          display: block;
          margin-bottom: 3px;
        }

        .live-bottom span {
          font-size: 0.82rem;
          opacity: 0.92;
        }

        .live-bottom .chip {
          white-space: nowrap;
          background: rgba(255,255,255,0.14);
          border: 1px solid rgba(255,255,255,0.18);
          color: #fff;
          padding: 8px 12px;
          border-radius: 999px;
          font-size: 0.8rem;
          font-weight: 700;
        }

        @media (max-width: 900px) {
          .live-wrap {
            grid-template-columns: 1fr;
          }
          .live-copy {
            padding: 34px 28px;
          }
          .live-right {
            padding: 18px;
          }
        }

        @media (max-width: 560px) {
          .live-grid {
            grid-template-columns: 1fr;
          }
          .live-bottom {
            flex-direction: column;
            align-items: flex-start;
          }
        }
      `}</style>

      <div className="container">
        <div className="live-wrap reveal">
          <div className="live-panel live-copy">
            <span className="eyebrow">Live</span>
            <h2>The CRM Problem, Solved.</h2>
            <p className="lead">
              Most businesses struggle with lead loss and complicated systems they don’t understand.
              Platforms like <strong>HubSpot</strong> or <strong>Salesforce</strong> take weeks to learn and even longer to set up.
            </p>
            <p className="lead">
              You can provide the solution. Give your clients a CRM that is just as powerful but simple,
              intuitive and actually enjoyable to use. No learning curve. No frustration. Just a system
              that works—under your brand.
            </p>

            <div className="live-badges">
              <span className="live-badge">No setup headaches</span>
              <span className="live-badge">Simple to use</span>
              <span className="live-badge">Fully white-label</span>
            </div>
          </div>

          <div className="live-panel live-right">
            <div className="live-card">
              <div className="live-card-head">
                <h3>Why clients love it</h3>
                <span className="pill">White-label ready</span>
              </div>

              <div className="live-grid">
                <div className="live-tile">
                  <div className="kicker">01 • Simple</div>
                  <h4>Easy for any team to understand</h4>
                  <p>No complex setup. No steep learning curve. Just a clean system that feels familiar from day one.</p>
                </div>

                <div className="live-tile">
                  <div className="kicker">02 • Fast</div>
                  <h4>Launch quickly and start selling</h4>
                  <p>Get a branded CRM into your customers’ hands without the months of development and delays.</p>
                </div>

                <div className="live-tile">
                  <div className="kicker">03 • Branded</div>
                  <h4>Your clients see your business</h4>
                  <p>Everything is presented under your name, so the product feels like it was built in-house.</p>
                </div>

                <div className="live-tile">
                  <div className="kicker">04 • Reliable</div>
                  <h4>Built to stay smooth and manageable</h4>
                  <p>You don’t have to worry about fixes, bugs or technical overhead. We handle the heavy lifting.</p>
                </div>
              </div>

              <div className="live-bottom">
                <div>
                  <strong>Deliver the CRM solution your market actually wants.</strong>
                  <span>Powerful, intuitive and completely under your brand.</span>
                </div>
                <div className="chip">Ready to white-label</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const gamechanger = [
    {
      icon: (
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <line x1="12" y1="1" x2="12" y2="23" />
          <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
        </svg>
      ),
      label: 'No Build Costs',
      desc: 'Skip the massive development investment.',
    },
    {
      icon: (
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="10" />
          <polyline points="12 6 12 12 16 14" />
        </svg>
      ),
      label: 'Launch Immediately',
      desc: 'Start selling today, not months from now.',
    },
    {
      icon: (
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
        </svg>
      ),
      label: 'Zero Technical Stress',
      desc: "You don't manage devs, fix bugs or maintain servers.",
    },
    {
      icon: (
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="8" r="4" />
          <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" />
        </svg>
      ),
      label: '100% Your Brand',
      desc: 'Your clients never see us. It is your business.',
    },
  ];

  return (
    <section className="section hiw-section" style={{ background: 'var(--paper-tint)', overflow: 'hidden' }}>
      <style>{`
        .hiw-section {
          position: relative;
        }

        .steps-wrap {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 0;
          position: relative;
        }
        .steps-wrap::before {
          content: '';
          position: absolute;
          top: 28px;
          left: calc(12.5% + 16px);
          right: calc(12.5% + 16px);
          height: 2px;
          background: linear-gradient(90deg, var(--blue-500, #2563eb) 0%, #93c5fd 100%);
          z-index: 0;
        }
        .step-v2 {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          padding: 0 16px;
          position: relative;
          z-index: 1;
        }
        .step-v2-bubble {
          width: 56px;
          height: 56px;
          border-radius: 50%;
          background: var(--blue-500, #2563eb);
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.8rem;
          font-weight: 800;
          letter-spacing: 0.04em;
          box-shadow: 0 0 0 6px #fff, 0 0 0 8px #dbeafe;
          margin-bottom: 20px;
          flex-shrink: 0;
        }
        .step-v2 h4 {
          font-size: 0.95rem;
          font-weight: 700;
          margin: 0 0 8px;
          color: var(--ink, #0f172a);
        }
        .step-v2 p {
          font-size: 0.84rem;
          color: var(--muted, #64748b);
          margin: 0 0 12px;
          line-height: 1.55;
        }
        .step-v2-time {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          font-size: 0.75rem;
          font-weight: 600;
          color: var(--blue-500, #2563eb);
          background: #eff6ff;
          border: 1px solid #bfdbfe;
          border-radius: 20px;
          padding: 3px 10px;
        }

        @media (max-width: 900px) {
          .steps-wrap {
            grid-template-columns: repeat(2, 1fr);
            gap: 32px;
          }
          .steps-wrap::before { display: none; }
        }

        @media (max-width: 560px) {
          .steps-wrap {
            grid-template-columns: 1fr;
          }
        }
      `}</style>

      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Why this matters</span>
          <h2>Why This is a <em>Game-Changer</em></h2>
          <p>
            Building an AI-powered CRM from scratch requires tens of thousands of dollars, a team of developers
            and months of testing. We've eliminated all of it.
          </p>
        </div>

        <div className="steps-wrap">
          {gamechanger.map((g, i) => (
            <div key={i} className="step-v2 reveal">
              <div className="step-v2-bubble">{g.icon}</div>
              <h4>{g.label}</h4>
              <p>{g.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Compare() {
  const rows = [
    ['Tens of thousands in dev fees', 'Zero build costs'],
    ['Months of coding and delays', 'Ready to sell in days'],
    ['Technical stress & managing devs', 'No technical team required'],
    ['Constant maintenance and fixes', 'We handle all updates & support'],
  ];

  return (
    <section className="section">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">The math</span>
          <h2>Build vs. <em>whitelabel ai.verest.</em></h2>
          <p>
            Building an AI-powered CRM from scratch costs tens of thousands and takes months of development
            and debugging. Why build when you can launch today?
          </p>
        </div>

        <style>{`
          .compare-v2 {
            width: 100%;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid var(--border, #e5e7eb);
            box-shadow: 0 4px 24px rgba(0,0,0,0.06);
          }
          .compare-v2-head {
            display: grid;
            grid-template-columns: 1fr 1fr;
          }
          .compare-v2-head-bad {
            background: #f9fafb;
            padding: 22px 32px;
            border-right: 1px solid var(--border, #e5e7eb);
          }
          .compare-v2-head-good {
            background: var(--blue-500, #2563eb);
            padding: 22px 32px;
          }
          .compare-v2-head-bad h3,
          .compare-v2-head-good h3 {
            margin: 0;
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: -0.01em;
          }
          .compare-v2-head-bad h3 { color: #6b7280; }
          .compare-v2-head-good h3 { color: #fff; }
          .compare-v2-body { display: flex; flex-direction: column; }
          .compare-v2-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            border-top: 1px solid var(--border, #e5e7eb);
          }
          .compare-v2-cell {
            padding: 18px 32px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.95rem;
            line-height: 1.5;
          }
          .compare-v2-cell-bad {
            background: #fff;
            border-right: 1px solid var(--border, #e5e7eb);
            color: #6b7280;
          }
          .compare-v2-cell-good {
            background: #eff6ff;
            color: #1d4ed8;
            font-weight: 600;
          }
          .compare-v2-icon-bad {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fee2e2;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ef4444;
            font-size: 13px;
            font-weight: 700;
          }
          .compare-v2-icon-good {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #dbeafe;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #2563eb;
            font-size: 13px;
            font-weight: 700;
          }
          @media (max-width: 600px) {
            .compare-v2-head,
            .compare-v2-row { grid-template-columns: 1fr; }
            .compare-v2-cell-bad {
              border-right: none;
              border-bottom: 1px solid var(--border, #e5e7eb);
            }
            .compare-v2-head-bad {
              border-right: none;
              border-bottom: 1px solid var(--border, #e5e7eb);
            }
          }
        `}</style>

        <div className="compare-v2 reveal">
          <div className="compare-v2-head">
            <div className="compare-v2-head-bad">
              <h3>The Old Way (DIY)</h3>
            </div>
            <div className="compare-v2-head-good">
              <h3>The Smart Way (Our White-Label)</h3>
            </div>
          </div>
          <div className="compare-v2-body">
            {rows.map(([bad, good], i) => (
              <div key={i} className="compare-v2-row">
                <div className="compare-v2-cell compare-v2-cell-bad">
                  <span className="compare-v2-icon-bad">✕</span>
                  {bad}
                </div>
                <div className="compare-v2-cell compare-v2-cell-good">
                  <span className="compare-v2-icon-good">✓</span>
                  {good}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Pricing() { return null; }

function FAQ() {
  const [open, setOpen] = useStateF(0);
  const items = [
    {
      q: 'Is the CRM really fully whitelabel?',
      a: 'Yes - your brand name, logo, color palette, custom domain and email templates. Your customers see your brand throughout.',
    },
    {
      q: 'How long does setup actually take?',
      a: 'Typically 14–30 days from first email to live tenant. Some setups go faster, more involved brands take a little longer - we keep you posted at every step.',
    },
    {
      q: 'How do we make brand changes?',
      a: 'Just email us. Send the new logo, color or domain change and our team applies it to your tenant.',
    },
    {
      q: 'Is our customer data safe?',
      a: 'Yes. The platform is GDPR compliant with encryption at rest and in transit on every tenant.',
    },
    {
      q: 'Do we retain ownership of our customers?',
      a: 'Completely. You sell, bill and support your customers directly. We stay invisible.',
    },
  ];

  return (
    <section className="section">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">FAQ</span>
          <h2>Answers, up front.</h2>
        </div>
        <div className="faq reveal">
          {items.map((it, i) => (
            <div
              key={i}
              className={`faq-item ${open === i ? 'open' : ''}`}
              onClick={() => setOpen(open === i ? -1 : i)}
            >
              <div className="faq-q">
                <span>{it.q}</span>
                <span className="faq-toggle">+</span>
              </div>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="section" id="demo">
      <div className="container">
        <div className="cta-block reveal">
          <svg className="constellation" viewBox="0 0 1200 400" preserveAspectRatio="none">
            {[...Array(40)].map((_, i) => {
              const x = Math.random() * 1200;
              const y = Math.random() * 400;
              const r = Math.random() * 1.5 + 0.5;
              return <circle key={i} cx={x} cy={y} r={r} fill="white" opacity={Math.random() * 0.6 + 0.2} />;
            })}
          </svg>
          <span
            className="eyebrow"
            style={{
              background: 'rgba(255,255,255,0.1)',
              color: 'white',
              borderColor: 'rgba(255,255,255,0.2)',
            }}
          >
            <span
              className="eyebrow-tag"
              style={{ background: 'var(--blue-500)', color: 'white', borderColor: 'var(--blue-500)' }}
            >
              Whitelabel
            </span>
            Your CRM, your brand
          </span>
          <h2 style={{ marginTop: 24 }}>
            Let's build your<br />
            <em>branded CRM.</em>
          </h2>
          <p>
            Launch faster. Sell smarter. Scale without technical barriers.
          </p>
          <div className="btn-row">
            <a className="btn btn-primary btn-lg" href="https://calendly.com/aiverest/45min">
              Get in touch <span className="arrow">→</span>
            </a>
            <a
              className="btn btn-outline btn-lg"
              style={{ background: 'transparent', borderColor: 'rgba(255,255,255,0.3)', color: 'white' }}
              href="#lab"
            >
              Try the live preview
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <a className="logo" href="/">
              <span className="logo-mark">
                <img src="/aiverest-logo.png" alt="ai.verest logo" />
              </span>
              <span className="logo-text">
                ai<span className="logo-dot">.</span>verest
              </span>
            </a>
            <p>The CRM that works instantly from day one.</p>
            <a href="mailto:info@aiverest.io" className="footer-contact-btn">Contact Us</a>
          </div>
          <div className="footer-col">
            <h4>Product</h4>
            <ul>
              <li><a href="#">Tasks</a></li>
              <li><a href="#">Calendar</a></li>
              <li><a href="#">Leads</a></li>
              <li><a href="#">Pages</a></li>
              <li><a href="#">Whiteboard</a></li>
              <li><a href="#">Chat</a></li>
              <li><a href="#">AI Agents</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Legal</h4>
            <ul>
              <li><a href="/legal/terms-and-conditions">Terms &amp; Conditions</a></li>
              <li><a href="/legal/privacy-policy">Privacy Policy</a></li>
              <li><a href="/legal/cookie-policy">Cookie Policy</a></li>
              <li><a href="/legal/dpa">DPA <span style={{fontSize:'11px',opacity:.65}}>(Download PDF)</span></a></li>
              <li><a href="/legal/security-annex">Security Annex</a></li>
              <li><a href="/legal/sub-processors">Sub-processors</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 ai.verest. All rights reserved.</div>
          <div style={{display:'flex',gap:'16px',alignItems:'center'}}>
            <span>Made with care.</span>
            <a href="/legal/privacy-policy" style={{color:'inherit'}}>Privacy</a>
            <a href="/legal/cookie-policy" style={{color:'inherit'}}>Cookies</a>
            <a href="/legal/terms-and-conditions" style={{color:'inherit'}}>Terms</a>
            <a href="mailto:info@aiverest.io" style={{color:'inherit',fontWeight:500}}>Contact</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.LogoMarquee = LogoMarquee;
window.Features = Features;
window.Live = Live;
window.HowItWorks = HowItWorks;
window.Compare = Compare;
window.Pricing = Pricing;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;