/* Blip landing page — main React app */
const { useState, useEffect, useRef, useMemo, useCallback } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "en",
  "heroVariant": "type",
  "showProBadge": true,
  "demoAutoplay": false
}/*EDITMODE-END*/;

// ---- Helpers ----------------------------------------------------------------
function detectLang() {
  try {
    const url = new URL(window.location.href);
    const q = url.searchParams.get('lang');
    if (q && window.BLIP_I18N[q]) return q;
    const stored = localStorage.getItem('blip-lang');
    if (stored && window.BLIP_I18N[stored]) return stored;
    const nav = (navigator.language || 'en').slice(0,2).toLowerCase();
    if (window.BLIP_I18N[nav]) return nav;
  } catch (e) {}
  return 'en';
}

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('is-in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ---- Header -----------------------------------------------------------------
function SiteHeader({ t, lang, setLang }) {
  return (
    <header className="site-header" role="banner">
      <a className="brand" href="#top" aria-label="Blip — home">
        <span className="brand-dot" aria-hidden="true"></span>
        <span>blip</span>
      </a>
      <nav className="nav-main" aria-label="Primary">
        <a href="#features">{t.nav.features}</a>
        <a href="#privacy">{t.nav.privacy}</a>
        <a href="#pricing">{t.nav.pricing}</a>
        <a href="#faq">{t.nav.faq}</a>
      </nav>
      <div className="header-right">
        <div className="lang-switch" role="group" aria-label={t.nav.langLabel}>
          {window.BLIP_LANGS.map(l => (
            <button
              key={l.code}
              type="button"
              aria-current={lang === l.code ? 'true' : 'false'}
              aria-label={l.name}
              onClick={() => setLang(l.code)}
            >{l.label}</button>
          ))}
        </div>
        <a className="btn-cta" href="#waitlist">{t.nav.cta}</a>
      </div>
    </header>
  );
}

// ---- Hero with watch demo ---------------------------------------------------
function WatchDemo({ t }) {
  const [recording, setRecording] = useState(false);
  const [elapsed, setElapsed] = useState(0);
  const [showTranscript, setShowTranscript] = useState(false);
  const tickRef = useRef(null);
  const [bars, setBars] = useState(Array(12).fill(8));

  useEffect(() => {
    if (recording) {
      const start = Date.now();
      tickRef.current = setInterval(() => {
        setElapsed(((Date.now() - start) / 1000));
        setBars(prev => prev.map(() => 6 + Math.random() * 32));
      }, 90);
    } else {
      clearInterval(tickRef.current);
      setBars(Array(12).fill(8));
    }
    return () => clearInterval(tickRef.current);
  }, [recording]);

  const fmt = (s) => {
    const m = Math.floor(s / 60).toString().padStart(1, '0');
    const sec = Math.floor(s % 60).toString().padStart(2, '0');
    return `${m}:${sec}`;
  };

  const toggle = () => {
    if (!recording) {
      setShowTranscript(false);
      setElapsed(0);
      setRecording(true);
    } else {
      setRecording(false);
      setShowTranscript(true);
    }
  };

  return (
    <div className="demo-stage" role="region" aria-label="Recording demo">
      <div
        className="watch"
        onClick={toggle}
        role="button"
        tabIndex={0}
        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } }}
        aria-pressed={recording}
      >
        <div className="watch-time">10:08</div>
        <button
          className="rec-button"
          data-recording={recording}
          aria-label={recording ? t.hero.demoStop : t.hero.demoHint}
          onClick={(e) => { e.stopPropagation(); toggle(); }}
        >
          <span className="rec-inner" aria-hidden="true"></span>
        </button>
        {recording && <div className="rec-timer">{fmt(elapsed)}</div>}
        {!recording && !showTranscript && (
          <div className="rec-label">{t.hero.demoHint}</div>
        )}
        {recording && (
          <div className="rec-label rec-label--live">{t.hero.demoRecording}</div>
        )}
        <div className={`waveform ${recording ? 'is-live' : ''}`} aria-hidden="true">
          {bars.map((h, i) => (
            <span key={i} className="bar" style={{ height: `${h}px` }}></span>
          ))}
        </div>
        {showTranscript && !recording && (
          <div className="transcript-card is-shown" role="status">
            <div className="ts">0:00 — {fmt(elapsed)} · iPhone</div>
            <div>"{t.hero.demoTranscript}"</div>
          </div>
        )}
      </div>
    </div>
  );
}

function Hero({ t }) {
  return (
    <section className="hero" id="top" aria-labelledby="hero-title">
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <span className="eyebrow">
              <span className="dot" aria-hidden="true"></span>
              {t.hero.eyebrow}
            </span>
            <h1 className="h-display" id="hero-title">
              {t.hero.title1}<br/>
              <span className="muted">{t.hero.title2}</span>
            </h1>
            <p className="lede">{t.hero.sub}</p>
            <div className="hero-actions">
              <a className="btn-primary" href="#waitlist">{t.hero.cta}</a>
              <a className="btn-ghost" href="#features">{t.nav.features} →</a>
            </div>
            <div className="hero-meta">{t.hero.ctaHint}</div>
          </div>
          <WatchDemo t={t} />
        </div>
      </div>
    </section>
  );
}

// ---- Features ---------------------------------------------------------------
function Features({ t }) {
  return (
    <section className="section section--paper" id="features" aria-labelledby="features-title">
      <div className="wrap">
        <span className="eyebrow eyebrow--paper">{t.features.eyebrow}</span>
        <h2 className="h-section reveal" id="features-title">{t.features.title}</h2>
        <div className="features-grid">
          {t.features.items.map((f, i) => (
            <div className="feature reveal" key={i}>
              <div className="feature-meta">
                <span className="feature-num">{f.k}</span>
                <span className="feature-label">{f.label}</span>
              </div>
              <h3 className="feature-title">{f.title}</h3>
              <p className="feature-desc">{f.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Privacy ----------------------------------------------------------------
function Privacy({ t }) {
  return (
    <section className="section section--ink" id="privacy" aria-labelledby="privacy-title">
      <div className="wrap">
        <div className="privacy-grid">
          <div>
            <span className="eyebrow eyebrow--paper" style={{color: 'var(--ink-4)'}}>{t.privacy.eyebrow}</span>
            <h2 className="h-section reveal" id="privacy-title" style={{margin: '16px 0 24px'}}>{t.privacy.title}</h2>
            <p className="lede" style={{marginTop: 0}}>{t.privacy.body}</p>
          </div>
          <ul className="privacy-list reveal">
            {t.privacy.bullets.map((b, i) => <li key={i}>{b}</li>)}
          </ul>
        </div>
      </div>
    </section>
  );
}

// ---- Pricing ----------------------------------------------------------------
function Pricing({ t, showBadge }) {
  return (
    <section className="section section--paper" id="pricing" aria-labelledby="pricing-title">
      <div className="wrap">
        <span className="eyebrow eyebrow--paper">{t.pricing.eyebrow}</span>
        <h2 className="h-section reveal" id="pricing-title">
          {t.pricing.title1}<br/><span className="muted">{t.pricing.title2}</span>
        </h2>
        <div className="pricing-grid">
          <div className="plan plan--free reveal">
            <div className="plan-label">{t.pricing.free.label}</div>
            <div className="plan-price">
              <span className="num">{t.pricing.free.price}</span>
              <span className="per">{t.pricing.free.per}</span>
            </div>
            <ul className="plan-list">
              {t.pricing.free.items.map((it, i) => <li key={'i'+i}>{it}</li>)}
              {t.pricing.free.excluded.map((it, i) => <li className="excluded" key={'e'+i}>{it}</li>)}
            </ul>
            <a className="plan-cta" href="#waitlist">{t.pricing.free.cta}</a>
          </div>
          <div className="plan plan--pro reveal">
            {showBadge && <div className="plan-badge">{t.pricing.pro.badge}</div>}
            <div className="plan-label">{t.pricing.pro.label}</div>
            <div className="plan-price">
              <span className="num">{t.pricing.pro.price}</span>
              <span className="per">{t.pricing.pro.per}</span>
            </div>
            <ul className="plan-list">
              {t.pricing.pro.items.map((it, i) => <li key={i}>{it}</li>)}
            </ul>
            <a className="plan-cta" href="#waitlist">{t.pricing.pro.cta}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- FAQ --------------------------------------------------------------------
function FAQ({ t }) {
  const [open, setOpen] = useState(0);
  return (
    <section className="section section--ink" id="faq" aria-labelledby="faq-title">
      <div className="wrap">
        <span className="eyebrow eyebrow--paper" style={{color: 'var(--ink-4)'}}>{t.faq.eyebrow}</span>
        <h2 className="h-section reveal" id="faq-title">{t.faq.title}</h2>
        <div className="faq-list">
          {t.faq.items.map((it, i) => (
            <div className="faq-item" data-open={open === i} key={i}>
              <button
                className="faq-q"
                aria-expanded={open === i}
                onClick={() => setOpen(open === i ? -1 : i)}
              >
                <span>{it.q}</span>
                <span className="ico" aria-hidden="true"></span>
              </button>
              <div className="faq-a" role="region">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Waitlist ---------------------------------------------------------------
const WAITLIST_API = 'https://gy2ddvb32i.execute-api.sa-east-1.amazonaws.com/dev/tapblip/waitlist';

function Waitlist({ t, lang }) {
  const [email, setEmail] = useState('');
  const [state, setState] = useState('idle');
  const submit = async (e) => {
    e.preventDefault();
    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    if (!ok) { setState('error'); return; }
    setState('sending');
    try {
      await fetch(WAITLIST_API, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, lang, source: 'landing-page' })
      });
      setState('success');
      setEmail('');
    } catch (err) {
      setState('success');
      setEmail('');
    }
  };
  return (
    <section className="waitlist" id="waitlist" aria-labelledby="waitlist-title">
      <div className="wrap">
        <span className="eyebrow eyebrow--paper" style={{color: 'var(--ink-4)'}}>{t.waitlist.eyebrow}</span>
        <h2 className="h-section reveal" id="waitlist-title" style={{margin: '16px auto 16px'}}>{t.waitlist.title}</h2>
        <p className="waitlist-sub">{t.waitlist.sub}</p>
        <form className="waitlist-form" onSubmit={submit} noValidate>
          <label htmlFor="wl-email" className="visually-hidden" style={{position:'absolute',left:'-9999px'}}>Email</label>
          <input
            id="wl-email"
            type="email"
            placeholder={t.waitlist.placeholder}
            value={email}
            onChange={e => { setEmail(e.target.value); setState('idle'); }}
            aria-invalid={state === 'error'}
            required
          />
          <button type="submit" disabled={state === 'sending'}>{state === 'sending' ? '...' : t.waitlist.cta}</button>
        </form>
        <div className="waitlist-msg" data-state={state} aria-live="polite">
          {state === 'success' && t.waitlist.success}
          {state === 'error' && t.waitlist.error}
        </div>
      </div>
    </section>
  );
}

// ---- Footer -----------------------------------------------------------------
function Footer({ t }) {
  return (
    <footer className="site-footer" role="contentinfo">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <a className="brand" href="#top">
              <span className="brand-dot" aria-hidden="true"></span>
              <span>blip</span>
            </a>
            <p className="tagline">{t.footer.tagline}</p>
          </div>
          <div className="footer-col">
            <h4>{t.footer.product}</h4>
            <ul>
              <li><a href="#waitlist">{t.footer.links.download}</a></li>
              <li><a href="#pricing">{t.footer.links.pricing}</a></li>
              <li><a href="#">{t.footer.links.changelog}</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>{t.footer.company}</h4>
            <ul>
              <li><a href="#">{t.footer.links.about}</a></li>
              <li><a href="#">{t.footer.links.manifesto}</a></li>
              <li><a href="#">{t.footer.links.contact}</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>{t.footer.legal}</h4>
            <ul>
              <li><a href="#">{t.footer.links.privacy}</a></li>
              <li><a href="#">{t.footer.links.terms}</a></li>
              <li><a href="#">{t.footer.links.api}</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t.footer.copy}</span>
          <span>{t.footer.made}</span>
        </div>
      </div>
    </footer>
  );
}

// ---- Tweaks panel -----------------------------------------------------------
function Tweaks({ tweaks, setTweak }) {
  if (!window.TweaksPanel) return null;
  const { TweaksPanel, TweakSection, TweakRadio, TweakToggle } = window;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Language">
        <TweakRadio
          value={tweaks.lang}
          onChange={(v) => setTweak('lang', v)}
          options={[
            { value: 'en', label: 'EN' },
            { value: 'es', label: 'ES' },
            { value: 'pt', label: 'PT' },
          ]}
        />
      </TweakSection>
      <TweakSection title="Layout">
        <TweakToggle
          label="Show 'Recommended' badge"
          value={tweaks.showProBadge}
          onChange={(v) => setTweak('showProBadge', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// ---- Main app ---------------------------------------------------------------
function App() {
  const [lang, setLangState] = useState(() => detectLang());
  const [tweaks, setTweaksState] = useState(TWEAK_DEFAULTS);

  // SEO + lang attributes whenever lang changes
  useEffect(() => {
    const t = window.BLIP_I18N[lang];
    document.documentElement.lang = t.htmlLang;
    document.documentElement.dir = t.dir;
    document.title = t.meta.title;
    const setMeta = (sel, content) => {
      const el = document.querySelector(sel);
      if (el) el.setAttribute('content', content);
    };
    setMeta('meta[name="description"]', t.meta.description);
    setMeta('meta[property="og:title"]', t.meta.ogTitle);
    setMeta('meta[property="og:description"]', t.meta.ogDescription);
    setMeta('meta[property="og:locale"]', t.locale);
    setMeta('meta[name="twitter:title"]', t.meta.ogTitle);
    setMeta('meta[name="twitter:description"]', t.meta.ogDescription);
    try {
      localStorage.setItem('blip-lang', lang);
      const u = new URL(window.location.href);
      u.searchParams.set('lang', lang);
      window.history.replaceState({}, '', u);
    } catch (e) {}
  }, [lang]);

  // Sync lang -> tweaks
  const setLang = useCallback((l) => {
    setLangState(l);
    setTweak('lang', l);
  }, []);

  const setTweak = useCallback((k, v) => {
    if (typeof k === 'object') {
      setTweaksState(prev => ({ ...prev, ...k }));
      try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: k }, '*'); } catch(e) {}
    } else {
      setTweaksState(prev => ({ ...prev, [k]: v }));
      try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*'); } catch(e) {}
    }
  }, []);

  // If tweaks.lang changes from panel, reflect it
  useEffect(() => {
    if (tweaks.lang && tweaks.lang !== lang) setLangState(tweaks.lang);
    // eslint-disable-next-line
  }, [tweaks.lang]);

  useReveal();

  const t = window.BLIP_I18N[lang];

  return (
    <div>
      <SiteHeader t={t} lang={lang} setLang={setLang} />
      <main id="main">
        <Hero t={t} />
        <Features t={t} />
        <Privacy t={t} />
        <Pricing t={t} showBadge={tweaks.showProBadge} />
        <FAQ t={t} />
        <Waitlist t={t} lang={lang} />
      </main>
      <Footer t={t} />
      <Tweaks tweaks={tweaks} setTweak={setTweak} />
    </div>
  );
}

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