// Lumynax — landing root.
// Composes the page from sections defined in this file.

const Nav = () => {
  const { t, lang, setLang } = useI18n();
  const { theme, toggle: toggleTheme } = useTheme();
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={`nav-wrap${scrolled ? ' scrolled' : ''}`}>
      <div className="container nav">
        <a href="#" className="nav-brand">
          <LumynaxMark size={32} halo={true} />
          <div className="nav-wordmark"><span className="lumy">Lumy</span><span className="nax">nax</span></div>
        </a>
        <nav className="nav-links" aria-label="Primary">
          <a href="/#features">{t('nav.features')}</a>
          <a href="/#personas">{t('nav.personas')}</a>
          <a href="/#how">{t('nav.how')}</a>
          <a href="/#pricing">{t('nav.pricing')}</a>
          <a href="/#faq">{t('nav.faq')}</a>
        </nav>
        <div className="nav-right">
          <div className="pill-toggle" role="group" aria-label="Language">
            <button className={lang === 'tr' ? 'on' : ''} onClick={() => {
              const onEn = location.pathname.startsWith('/en');
              if (onEn) {
                window.localStorage.setItem('lumynax-lang', 'tr');
                location.href = '/';
              } else { setLang('tr'); }
            }}>TR</button>
            <button className={lang === 'en' ? 'on' : ''} onClick={() => {
              const onEn = location.pathname.startsWith('/en');
              if (!onEn) {
                window.localStorage.setItem('lumynax-lang', 'en');
                location.href = '/en/';
              } else { setLang('en'); }
            }}>EN</button>
          </div>
          <button className="icon-btn" onClick={toggleTheme} aria-label="Toggle theme" title={theme === 'dark' ? 'Light mode' : 'Dark mode'}>
            {theme === 'dark' ? <Ic.Sun2 s={16} /> : <Ic.Moon2 s={16} />}
          </button>
          <span style={{ position: 'relative', display: 'inline-block' }}>
            <ComingSoonBadge />
            <a href="#" onClick={(e) => e.preventDefault()} className="btn btn-primary" style={{ opacity: 0.92, cursor: 'not-allowed' }}>{t('nav.download')}</a>
          </span>
        </div>
      </div>
    </div>);

};

const ComingSoonBadge = () => {
  const { lang } = useI18n();
  const label = lang === 'tr' ? 'Yakında' : 'Coming soon';
  return (
    <span style={{
      position: 'absolute', top: -10, right: -10,
      padding: '3px 9px',
      borderRadius: 999,
      background: 'var(--brand-gradient)',
      color: 'white',
      fontSize: 10,
      fontWeight: 800,
      letterSpacing: '0.04em',
      textTransform: 'uppercase',
      boxShadow: '0 6px 14px -4px rgba(107,91,255,0.6)',
      pointerEvents: 'none',
      whiteSpace: 'nowrap',
      transform: 'rotate(4deg)',
      zIndex: 2,
    }}>{label}</span>
  );
};

const StoreButtons = ({ alt = false }) => {
  const { t } = useI18n();
  return (
    <>
      <span style={{ position: 'relative', display: 'inline-block' }}>
        <ComingSoonBadge />
        <a className={`store-btn${alt ? ' alt' : ''}`} href="#" onClick={(e) => e.preventDefault()}
           style={{ opacity: 0.85, cursor: 'not-allowed' }}>
          <Ic.Apple s={22} />
          <div className="store-text">
            <small>{t('hero.app_store_small')}</small>
            <span>{t('hero.app_store_big')}</span>
          </div>
        </a>
      </span>
      <span style={{ position: 'relative', display: 'inline-block' }}>
        <ComingSoonBadge />
        <a className={`store-btn${alt ? ' alt' : ''}`} href="#" onClick={(e) => e.preventDefault()}
           style={{ background: alt ? undefined : '#1A1A2E', color: alt ? undefined : '#F0F0FF', opacity: 0.85, cursor: 'not-allowed' }}>
          <Ic.Play s={22} />
          <div className="store-text">
            <small>{t('hero.gplay_small')}</small>
            <span>{t('hero.gplay_big')}</span>
          </div>
        </a>
      </span>
    </>);

};

const Hero = () => {
  const { t } = useI18n();
  return (
    <section className="hero">
      <Starfield />
      <div className="hero-bg-orb a"></div>
      <div className="hero-bg-orb b"></div>
      <div className="container hero-grid">
        <div>
          <span className="eyebrow"><span className="dot"></span> {t('hero.eyebrow')}</span>
          <h1>
            {t('hero.h1_a')}<br />
            <span className="serif">{t('hero.h1_b')}</span> <span className="grad">{t('hero.h1_c')}</span>
          </h1>
          <p className="hero-sub">{t('hero.sub')}</p>
          <div className="hero-cta">
            <StoreButtons />
          </div>
          <div className="trust-row">
            <div className="avatar-stack">
              <img className="av" src="https://i.pravatar.cc/120?img=47" alt="" aria-hidden="true" />
              <img className="av" src="https://i.pravatar.cc/120?img=12" alt="" aria-hidden="true" />
              <img className="av" src="https://i.pravatar.cc/120?img=48" alt="" aria-hidden="true" />
              <img className="av" src="https://i.pravatar.cc/120?img=33" alt="" aria-hidden="true" />
            </div>
            <div className="trust-text">{t('hero.trust')}</div>
          </div>
        </div>
        <div className="phone-stage">
          <div className="phone-glow"></div>
          <PhoneChat />
        </div>
      </div>
    </section>);

};

const DoesBand = () => {
  const { t } = useI18n();
  const cells = t('does.cells');
  return (
    <section className="does-band">
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 36 }}>
          <div>
            <div className="section-eyebrow">{t('does.eyebrow')}</div>
            <h2 style={{ margin: 0 }}>
              {t('does.h2_a')} <span style={{ color: 'var(--text-muted)', fontWeight: 700 }}>{t('does.h2_b')}</span> <span className="grad">{t('does.h2_c')}</span>
            </h2>
          </div>
          <p className="section-lede" style={{ maxWidth: 460 }}>{t('does.lede')}</p>
        </div>
        <div className="does-grid">
          {cells.map((c, i) =>
          <div className="does-cell" key={i}>
              <div className="verb">{c.v}</div>
              <div className="verb-meta">{c.m}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const FeatureSplit = ({ id, copyKey, phone, reverse }) => {
  const { t } = useI18n();
  const bullets = t(`${copyKey}.bullets`);
  const note = t(`${copyKey}.note`);
  return (
    <div className={`feat${reverse ? ' reverse' : ''}`} id={id}>
      <div className="feat-copy">
        <span className="tag">{t(`${copyKey}.tag`)}</span>
        <h3>{t(`${copyKey}.h`)}</h3>
        <p>{t(`${copyKey}.p`)}</p>
        <ul className="bullets">
          {bullets.map((b, i) =>
          <li key={i}>
              <span className="check"><Ic.Check s={12} /></span>
              <div><b>{b[0]}</b> <span className="muted">— {b[1]}</span></div>
            </li>
          )}
        </ul>
        {typeof note === 'string' && note !== `${copyKey}.note` &&
        <div style={{ marginTop: 22, fontSize: 13, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 8 }}>
            <Spark size={11} /> {note}
          </div>
        }
      </div>
      <div className="phone-stage">
        <div className="phone-glow"></div>
        {phone}
      </div>
    </div>);

};

const FeaturesSection = () => {
  const { t } = useI18n();
  return (
    <section className="section" id="features">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 12 }}>
          <div className="section-eyebrow">Lumynax · özellikler</div>
          <h2><span className="serif">İyi bir arkadaş gibi.</span><br />Sadece çok iyi bir <span className="grad">hafızayla.</span></h2>
        </div>
        <FeatureSplit id="f-memory" copyKey="f1" phone={<PhoneMemory />} />
        <FeatureSplit id="f-reminders" copyKey="f2" phone={<PhoneReminders />} reverse />
        <FeatureSplit id="f-recall" copyKey="f3" phone={<PhoneRecall />} />
        <FeatureSplit id="f-proactive" copyKey="f4" phone={<PhoneProactive />} reverse />
      </div>
    </section>);

};

const PersonaCard = ({ p }) => {
  const gradients = {
    friend: ['#8A7DFF', '#EC6FB8'],
    fun: ['#8FE0CE', '#B3A8FF'],
    coach: ['#7DA8FF', '#8A7DFF'],
    sage: ['#3FA0A8', '#7FC9D0']
  };
  const ic = { friend: <Ic.Heart s={24} />, fun: <Ic.Sparkle s={22} />, coach: <Ic.Rocket s={24} />, sage: <Ic.Book s={24} /> };
  const [g1, g2] = gradients[p.key];
  return (
    <div className="persona-card">
      <div className="p-glow" style={{ background: `radial-gradient(circle, ${g1}55, transparent 60%)` }}></div>
      <div className="avatar" style={{ background: `linear-gradient(135deg, ${g1}, ${g2})`, boxShadow: `0 12px 24px -10px ${g1}80` }}>
        {ic[p.key]}
      </div>
      <div className={`ptier ${p.tierKey}`}>{p.tier}</div>
      <h4 className="pname">{p.name}</h4>
      <p className="pdesc">{p.desc}</p>
      <div className="pquote">{p.quote}</div>
    </div>);

};

const Personas = () => {
  const { t } = useI18n();
  return (
    <section className="section" id="personas" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="section-eyebrow">{t('personas.eyebrow')}</div>
        <h2>{t('personas.h2_a')} <span className="grad serif">{t('personas.h2_b')}</span></h2>
        <p className="section-lede">{t('personas.lede')}</p>
        <div className="personas-grid">
          {t('personas.cards').map((p) => <PersonaCard key={p.key} p={p} />)}
        </div>
      </div>
    </section>);

};

const HowItWorks = () => {
  const { t } = useI18n();
  return (
    <section className="section" id="how" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="section-eyebrow">{t('how.eyebrow')}</div>
        <h2>{t('how.h2')}</h2>
        <p className="section-lede">{t('how.lede')}</p>
        <div className="steps">
          {t('how.steps').map((s, i) =>
          <div className="step" key={i}>
              <div className="step-num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.p}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const Proactive = () => {
  const { t } = useI18n();
  return (
    <section className="section" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="section-eyebrow">{t('proactive.eyebrow')}</div>
        <h2>{t('proactive.h2')}</h2>
        <p className="section-lede">{t('proactive.lede')}</p>
        <div className="timeline">
          <div className="timeline-grid">
            {t('proactive.cards').map((c, i) =>
            <div className="tl-card" key={i}>
                <div className="tl-time">
                  <span className="dotc" style={{ background: c.color, boxShadow: `0 0 10px ${c.color}` }}></span>
                  {c.time}
                </div>
                <div className="tl-title" style={{ color: c.color }}>{c.title}</div>
                <div className="tl-msg">{c.msg}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

};

const PriceCard = ({ p }) => {
  const { t } = useI18n();
  const isComingSoon = p.price === 'Yakında' || p.price === 'Coming soon';
  return (
    <div className={`price-card${p.featured ? ' featured' : ''}`}>
      {p.popular && <div className="pop-badge">{p._popularLabel}</div>}
      <div className="price-tier">{p.tier}</div>
      <div className="price-name">{p.name}</div>
      <div className="price-tag" style={isComingSoon ? { alignItems: 'center' } : null}>
        <span className="num" style={isComingSoon ? {
          fontSize: 22, fontWeight: 800, letterSpacing: '0.02em',
          background: 'var(--brand-gradient)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
        } : null}>{p.price}</span>
        {p.per && <span className="per">{p.per}</span>}
      </div>
      <ul className="price-features">
        {p.features.map((f, i) =>
        <li key={i} className={f.muted ? 'muted' : ''}>
            {f.muted ? <Ic.Plus s={14} /> : <Ic.Check s={14} />}
            <span>{f.txt}</span>
          </li>
        )}
      </ul>
      <a href="#" onClick={(e) => e.preventDefault()} className={`btn ${p.featured ? 'btn-primary' : 'btn-ghost'} price-cta`}
         style={{ opacity: 0.92, cursor: 'not-allowed', width: '100%' }}>{p.cta}</a>
    </div>);

};

const Pricing = () => {
  const { t, lang } = useI18n();
  return (
    <section className="section" id="pricing" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="section-eyebrow">{t('pricing.eyebrow')}</div>
        <h2>{t('pricing.h2_a')} <span className="serif grad">{t('pricing.h2_b')}</span> {t('pricing.h2_c')}</h2>
        <p className="section-lede">{t('pricing.lede')}</p>
        <div className="price-grid">
          {t('pricing.tiers').map((p, i) => <PriceCard p={{ ...p, _popularLabel: lang === 'tr' ? 'En popüler' : 'Most popular' }} key={i} />)}
        </div>
        <div style={{ marginTop: 26, fontSize: 13, color: 'var(--text-muted)', textAlign: 'center' }}>
          {lang === 'tr' ?
          'Yıllık al → 2 ay bedava. İstediğin an iptal edebilirsin.' :
          'Annual → 2 months free. Cancel any time.'}
        </div>
      </div>
    </section>);

};

const FAQ = () => {
  const { t } = useI18n();
  return (
    <section className="section" id="faq" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container" style={{ maxWidth: 820 }}>
        <div className="section-eyebrow">{t('faq.eyebrow')}</div>
        <h2>{t('faq.h2')}</h2>
        <div className="faq-list">
          {t('faq.items').map((it, i) =>
          <details className="faq-item" key={i}>
              <summary className="faq-q">
                <span>{it.q}</span>
                <span className="ico"><Ic.Plus s={14} /></span>
              </summary>
              <div className="faq-a">{it.a}</div>
            </details>
          )}
        </div>
      </div>
    </section>);

};

const CTA = () => {
  const { t } = useI18n();
  return (
    <section className="container" id="download">
      <div className="cta-banner">
        <div>
          <h2>{t('cta.h2_a')} <span className="serif grad">{t('cta.h2_b')}</span></h2>
          <p>{t('cta.p')}</p>
          <div className="hero-cta">
            <StoreButtons alt={false} />
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
          <div style={{
            width: 200, height: 200, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(255,255,255,0.18), transparent 65%)',
            position: 'absolute', filter: 'blur(20px)'
          }}></div>
          <LumynaxMark size={180} halo={true} gradient={false} />
        </div>
      </div>
    </section>);

};

const Footer = () => {
  const { t, lang } = useI18n();
  const cols = t('footer.cols');
  return (
    <footer>
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <a href="#" className="nav-brand" style={{ textDecoration: 'none' }}>
              <LumynaxMark size={30} halo={true} />
              <div className="nav-wordmark" style={{ fontSize: 22 }}>
                <span className="lumy">Lumy</span><span className="nax">nax</span>
              </div>
            </a>
            <p>{t('footer.tagline')}</p>
            <div style={{ marginTop: 18, display: 'flex', gap: 10 }}>
              {[
                ['Instagram', 'https://www.instagram.com/lumynaxapp/', 'M12 2.3c2.7 0 3 0 4 .1 1 0 1.6.2 2 .4.5.2.9.4 1.3.8.4.4.6.8.8 1.3.2.4.3 1 .4 2 .1 1 .1 1.3.1 4s0 3-.1 4c0 1-.2 1.6-.4 2-.2.5-.4.9-.8 1.3-.4.4-.8.6-1.3.8-.4.2-1 .3-2 .4-1 .1-1.3.1-4 .1s-3 0-4-.1c-1 0-1.6-.2-2-.4-.5-.2-.9-.4-1.3-.8-.4-.4-.6-.8-.8-1.3-.2-.4-.3-1-.4-2C2.3 15 2.3 14.7 2.3 12s0-3 .1-4c0-1 .2-1.6.4-2 .2-.5.4-.9.8-1.3.4-.4.8-.6 1.3-.8.4-.2 1-.3 2-.4 1-.1 1.3-.1 4-.1Zm0 1.6c-2.7 0-3 0-4 .1-.8 0-1.3.2-1.5.3-.4.1-.7.3-1 .6-.3.3-.5.6-.6 1-.1.3-.3.8-.3 1.5-.1 1-.1 1.3-.1 4s0 3 .1 4c0 .8.2 1.3.3 1.5.1.4.3.7.6 1 .3.3.6.5 1 .6.3.1.8.3 1.5.3 1 .1 1.3.1 4 .1s3 0 4-.1c.8 0 1.3-.2 1.5-.3.4-.1.7-.3 1-.6.3-.3.5-.6.6-1 .1-.3.3-.8.3-1.5.1-1 .1-1.3.1-4s0-3-.1-4c0-.8-.2-1.3-.3-1.5-.1-.4-.3-.7-.6-1-.3-.3-.6-.5-1-.6-.3-.1-.8-.3-1.5-.3-1-.1-1.3-.1-4-.1Zm0 2.7a5.4 5.4 0 1 1 0 10.8 5.4 5.4 0 0 1 0-10.8Zm0 1.6a3.7 3.7 0 1 0 0 7.5 3.7 3.7 0 0 0 0-7.5Zm5.6-.7a1.3 1.3 0 1 1-2.5 0 1.3 1.3 0 0 1 2.5 0Z'],
                ['X', 'https://x.com/lumynaxapp', 'M18.2 3h3l-6.5 7.4L22 21h-5.8l-4.5-5.9L6 21H3l7-8L2.5 3h6l4.1 5.4L18.2 3Zm-1 16h1.7L7 5H5.2L17.2 19Z'],
                ['TikTok', 'https://www.tiktok.com/@lumynaxapp', 'M16 3v9.4a3.6 3.6 0 1 1-3.6-3.6V12a1.4 1.4 0 1 0 1.4 1.4V3h2.2Zm2.4 0a4 4 0 0 0 4 4V9.2a6 6 0 0 1-4-1.5V3Z'],
                ['Facebook', 'https://www.facebook.com/profile.php?id=61590052306004', 'M22 12a10 10 0 1 0-11.6 9.9v-7H8v-2.9h2.4V9.8c0-2.4 1.4-3.7 3.6-3.7 1 0 2.1.2 2.1.2v2.3h-1.2c-1.2 0-1.5.7-1.5 1.5V12h2.6l-.4 2.9h-2.2v7A10 10 0 0 0 22 12Z'],
                ['LinkedIn', 'https://www.linkedin.com/in/lumynax-app-693760411/', 'M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2ZM8.3 18H5.7V9.7h2.6V18ZM7 8.6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3ZM18.3 18h-2.6v-4c0-1-.4-1.6-1.3-1.6-1 0-1.5.7-1.5 1.6V18h-2.6V9.7h2.5v1.1c.4-.6 1.1-1.4 2.6-1.4 1.8 0 2.9 1 2.9 3V18Z'],
              ].map(([label, href, d]) =>
              <a key={label} href={href} target="_blank" rel="noopener noreferrer" aria-label={label} style={{
                width: 36, height: 36, borderRadius: '50%', background: 'var(--surface-alt)', border: '1px solid var(--border)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-secondary)'
              }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d={d} /></svg>
                </a>
              )}
            </div>
          </div>
          {cols.map((col, i) =>
          <div className="footer-col" key={i}>
              <h5>{col.h}</h5>
              <ul>
                {col.items.map(([label, href], j) => <li key={j}><a href={href}>{label}</a></li>)}
              </ul>
            </div>
          )}
        </div>
        <div className="footer-bottom">
          <span>{t('footer.bottom_left')}</span>
          <span style={{ display: 'flex', gap: 16 }}></span>
        </div>
      </div>
    </footer>);

};

const ScrollTopButton = () => {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 480);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <button
      className={`scroll-top${visible ? ' visible' : ''}`}
      aria-label="Scroll to top"
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
    >
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 19V5M5 12l7-7 7 7"/>
      </svg>
    </button>
  );
};

const App = () =>
<ThemeProvider>
    <I18nProvider>
      <Nav />
      <main>
        <Hero />
        <DoesBand />
        <FeaturesSection />
        <Personas />
        <HowItWorks />
        <Proactive />
        <Pricing />
        <FAQ />
        <CTA />
      </main>
      <Footer />
      <ScrollTopButton />
    </I18nProvider>
  </ThemeProvider>;


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