/* global React */
const { useState, useEffect, useRef } = React;

// Reveal-on-scroll hook
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add('in');
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

function Reveal({ children, className = '', style }) {
  const ref = useReveal();
  return (
    <div ref={ref} className={`reveal ${className}`} style={style}>
      {children}
    </div>
  );
}

function Nav() {
  return (
    <nav className="nav">
      <div className="logo">
        <img src="assets/logos/roboflow-full-white-trim-web.png" alt="Roboflow" className="logo-full-img" />
        <span className="logo-suffix"><span style={{color:'var(--ink-faint)'}}> / </span><b>AI1</b></span>
      </div>
      <div className="links">
        <a href="#platform">Platform</a>
        <a href="#enterprise">Enterprise</a>
        <a href="#models">Models</a>
        <a href="#how">How it works</a>
        <a href="#cases">Case studies</a>
      </div>
      <button type="button" className="cta-btn mono" onClick={() => window.__openLeadModal('preview')}>GET EARLY ACCESS →</button>
    </nav>
  );
}

function Blueprint({ withImage = true, small = false }) {
  return (
    <div className="blueprint">
      <div className="grid-bg"></div>
      <span className="crosshair ch-tl"></span>
      <span className="crosshair ch-tr"></span>
      <span className="crosshair ch-bl"></span>
      <span className="crosshair ch-br"></span>

      <div className="lbl-corner mono">DWG-001 · REV 24 · 1:1</div>
      <div className="lbl-bl mono">
        <span><span className="k">X</span> +000.000</span>
        <span><span className="k">Y</span> +000.000</span>
        <span><span className="k">Z</span> +000.000</span>
      </div>

      {withImage && (
        <img src="assets/ai1-photo.webp" alt="AI1 industrial vision camera" className="hero-img hero-img-photo" />
      )}

      <span className="spec-tag" style={{top:'22%', left:'6%'}}>8·LED RING</span>
      <span className="spec-tag" style={{top:'46%', right:'6%'}}>12 MM LENS</span>
      <span className="spec-tag" style={{bottom:'22%', left:'6%'}}>ORIN NX · 8 GB</span>
      <span className="spec-tag" style={{top:'8%', left:'50%', transform:'translateX(-50%)'}}>IP54</span>
    </div>
  );
}

function Tweaks({ tweaks, setTweaks }) {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setOpen(false);
    };
    window.addEventListener('message', handler);
    // announce availability
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch {}
    return () => window.removeEventListener('message', handler);
  }, []);

  const update = (patch) => {
    const next = { ...tweaks, ...patch };
    setTweaks(next);
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
    } catch {}
  };

  return (
    <div className={`tweaks ${open ? 'open' : ''}`}>
      <button className="tweaks-close" onClick={() => setOpen(false)}>✕</button>
      <h4>Tweaks</h4>

      <div className="t-row">
        <div className="t-lbl">Hero variant</div>
        <div className="t-opts">
          {['blueprint', 'fullbleed', 'photo'].map((v) => (
            <button
              key={v}
              className={tweaks.heroVariant === v ? 'active' : ''}
              onClick={() => update({ heroVariant: v })}
            >{v}</button>
          ))}
        </div>
      </div>

      <div className="t-row">
        <div className="t-lbl">Accent</div>
        <div className="t-swatch">
          {['purple','mint','amber','blue'].map((a) => (
            <button
              key={a}
              className={`s-${a} ${tweaks.accent === a ? 'active' : ''}`}
              onClick={() => update({ accent: a })}
              title={a}
            />
          ))}
        </div>
      </div>

      <div className="t-row">
        <div className="t-lbl">Backdrop grid</div>
        <div className="t-opts">
          <button className={tweaks.showGrid ? 'active' : ''} onClick={() => update({ showGrid: true })}>On</button>
          <button className={!tweaks.showGrid ? 'active' : ''} onClick={() => update({ showGrid: false })}>Off</button>
        </div>
      </div>
    </div>
  );
}

function LeadModal({ intent, onClose }) {
  const config = {
    download: {
      title: 'Download the spec sheet',
      sub: '',
      cta: 'Download PDF',
      after: () => {
        const a = document.createElement('a');
        a.href = 'AI1-Spec-Sheet.pdf';
        a.download = 'AI1-Spec-Sheet.pdf';
        a.target = '_blank';
        a.rel = 'noopener';
        a.click();
      },
      successCopy: 'Your download should start automatically.',
    },
    sales: {
      title: 'Talk to sales',
      sub: 'Quick intro so the right person can reach out.',
      cta: 'Continue to sales',
      after: () => {
        window.open('https://roboflow.com/sales', '_blank', 'noopener');
      },
      successCopy: 'Opening the sales form now.',
    },
    preview: {
      title: 'Get early access',
      sub: 'Developer preview units are rolling out. Tell us a bit about you.',
      cta: 'Notify me',
      after: null,
      successCopy: 'You\'re on the list. We\'ll be in touch when AI1 is ready.',
    },
  };
  const c = config[intent] || config.preview;
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState('idle');
  const [error, setError] = useState('');
  const firstRef = useRef(null);

  useEffect(() => {
    if (firstRef.current) firstRef.current.focus();
    const onKey = (e) => e.key === 'Escape' && onClose();
    window.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, []);

  const submit = async (e) => {
    e.preventDefault();
    setStatus('submitting');
    setError('');
    try {
      const r = await fetch('/api/lead', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, email, source: intent }),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok) throw new Error(data.error || 'Could not save');
      setStatus('success');
      if (c.after) setTimeout(c.after, 250);
    } catch (err) {
      setStatus('error');
      setError(err.message || 'Something went wrong');
    }
  };

  return (
    <div className="lead-backdrop" onClick={onClose} role="dialog" aria-modal="true">
      <div className="lead-modal" onClick={(e) => e.stopPropagation()}>
        <button className="lead-close" onClick={onClose} aria-label="Close">✕</button>
        {status !== 'success' ? (
          <>
            <div className="section-label mono" style={{ marginBottom: 16 }}>The AI1</div>
            <h3 className="lead-title">{c.title}</h3>
            {c.sub && <p className="lead-sub">{c.sub}</p>}
            <form onSubmit={submit} className="lead-form">
              <label>
                <span>Name</span>
                <input ref={firstRef} required value={name} onChange={(e) => setName(e.target.value)} autoComplete="name" />
              </label>
              <label>
                <span>Work email</span>
                <input required type="email" value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="email" />
              </label>
              <button type="submit" className="btn btn-primary lead-submit" disabled={status === 'submitting'}>
                {status === 'submitting' ? 'Sending…' : c.cta}
                <span className="arrow">→</span>
              </button>
              {status === 'error' && <div className="lead-err">{error}</div>}
            </form>
          </>
        ) : (
          <div className="lead-success">
            <div className="section-label mono">Sent</div>
            <h3 className="lead-title">Thanks, {name.split(' ')[0]}.</h3>
            <p className="lead-sub">{c.successCopy}</p>
            <button className="btn" onClick={onClose}>Close</button>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Reveal, Nav, Blueprint, Tweaks, LeadModal });