// App.jsx — main site component
const { useState, useEffect, useRef } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "sage",
  "fontScheme": "editorial",
  "heroLayout": "split",
  "grain": true
}/*EDITMODE-END*/;

// Each palette also exposes *Rgb triplets so alpha-tinted bits (nav-scroll
// backdrop, pulse rings, gradient washes) follow the active theme via
// rgba(var(--bgRgb), <alpha>) etc.
const ACCENTS = {
  sage: {
    bg: "#f6f1e8",           // warm cream
    bgRgb: "246, 241, 232",
    bgAlt: "#efe6d5",        // deeper cream
    ink: "#2a2620",          // warm near-black
    inkSoft: "#6b6357",
    accent: "#8a9a7b",       // sage green
    accentRgb: "138, 154, 123",
    accentDeep: "#5e6e50",
    accentSoft: "#d9dfcf",
    card: "#fbf8f1",
    cardRgb: "251, 248, 241",
    border: "#e4dccb",
  },
  terracotta: {
    bg: "#f7f0e7",
    bgRgb: "247, 240, 231",
    bgAlt: "#f0e4d2",
    ink: "#2b221c",
    inkSoft: "#6d6054",
    accent: "#c07a5e",
    accentRgb: "192, 122, 94",
    accentDeep: "#9a5a42",
    accentSoft: "#eed9ca",
    card: "#fcf8f1",
    cardRgb: "252, 248, 241",
    border: "#e6dccc",
  },
  rose: {
    bg: "#f8f1ec",
    bgRgb: "248, 241, 236",
    bgAlt: "#f1e4db",
    ink: "#2a231f",
    inkSoft: "#6d6056",
    accent: "#b98878",
    accentRgb: "185, 136, 120",
    accentDeep: "#8e6150",
    accentSoft: "#ecd9cf",
    card: "#fcf7f3",
    cardRgb: "252, 247, 243",
    border: "#e8dccf",
  },
};

const FONTS = {
  editorial: {
    label: "Editorial — Fraunces + Inter",
    display: "'Fraunces', 'Times New Roman', serif",
    body: "'Inter', system-ui, sans-serif",
    mono: "'JetBrains Mono', monospace",
    displayWeight: 400,
    displayTracking: "-0.02em",
  },
  modern: {
    label: "Modern — Instrument + Geist",
    display: "'Instrument Serif', serif",
    body: "'Geist', system-ui, sans-serif",
    mono: "'JetBrains Mono', monospace",
    displayWeight: 400,
    displayTracking: "-0.015em",
  },
  classic: {
    label: "Classic — Cormorant + Work Sans",
    display: "'Cormorant Garamond', serif",
    body: "'Work Sans', system-ui, sans-serif",
    mono: "'JetBrains Mono', monospace",
    displayWeight: 500,
    displayTracking: "-0.01em",
  },
  parisian: {
    label: "Parisian — Playfair + DM Sans",
    display: "'Playfair Display', serif",
    body: "'DM Sans', system-ui, sans-serif",
    mono: "'JetBrains Mono', monospace",
    displayWeight: 500,
    displayTracking: "-0.02em",
  },
  warm: {
    label: "Warm — DM Serif + Manrope",
    display: "'DM Serif Display', serif",
    body: "'Manrope', system-ui, sans-serif",
    mono: "'JetBrains Mono', monospace",
    displayWeight: 400,
    displayTracking: "-0.025em",
  },
  bookish: {
    label: "Bookish — EB Garamond + Nunito",
    display: "'EB Garamond', serif",
    body: "'Nunito', system-ui, sans-serif",
    mono: "'JetBrains Mono', monospace",
    displayWeight: 500,
    displayTracking: "-0.005em",
  },
  bold: {
    label: "Bold sans — Bricolage + Inter",
    display: "'Bricolage Grotesque', sans-serif",
    body: "'Inter', system-ui, sans-serif",
    mono: "'JetBrains Mono', monospace",
    displayWeight: 600,
    displayTracking: "-0.035em",
  },
  soft: {
    label: "Soft — Lora + Outfit",
    display: "'Lora', serif",
    body: "'Outfit', system-ui, sans-serif",
    mono: "'JetBrains Mono', monospace",
    displayWeight: 500,
    displayTracking: "-0.015em",
  },
};

// EUR/GBP rate (~1.17) — prices already computed in PRICES, just format
function fmt(amount, currency) {
  const symbol = currency === "gbp" ? "£" : "€";
  return `${symbol}${amount}`;
}

function useEdit() {
  const [tweaks, setTweaks] = useTweaks(DEFAULTS);
  return [tweaks, setTweaks];
}

function App() {
  const [tweaks, setTweaks] = useTweaks(DEFAULTS);
  const [lang, setLang] = useState("ru");
  const [currency, setCurrency] = useState("gbp");
  const t = window.I18N[lang];
  const P = window.PRICES;

  const palette = ACCENTS[tweaks.accent] || ACCENTS.sage;
  const fonts = FONTS[tweaks.fontScheme] || FONTS.editorial;

  // Apply CSS vars
  useEffect(() => {
    const r = document.documentElement;
    Object.entries(palette).forEach(([k, v]) => r.style.setProperty(`--${k}`, v));
    r.style.setProperty("--font-display", fonts.display);
    r.style.setProperty("--font-body", fonts.body);
    r.style.setProperty("--font-mono", fonts.mono);
    r.style.setProperty("--font-display-weight", String(fonts.displayWeight));
    r.style.setProperty("--font-display-tracking", fonts.displayTracking);
  }, [palette, fonts]);

  // Sync <html lang> with the selected language so screen readers + search
  // engines see the right locale.
  useEffect(() => {
    document.documentElement.lang = lang === "ua" ? "uk" : "ru";
  }, [lang]);

  return (
    <div className="site" data-grain={tweaks.grain ? "on" : "off"}>
      {tweaks.grain && <div className="grain" aria-hidden="true" />}
      <NavBar
        t={t}
        lang={lang}
        setLang={setLang}
        currency={currency}
        setCurrency={setCurrency}
      />
      <Hero t={t} layout={tweaks.heroLayout} />
      <About t={t} />
      <Pricing t={t} currency={currency} setCurrency={setCurrency} prices={P} />
      <HowItWorks t={t} />
      <Reviews t={t} />
      <Resources t={t} />
      <FAQ t={t} />
      <Contact t={t} />
      <Footer t={t} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette">
          <TweakRadio
            label="Accent"
            value={tweaks.accent}
            onChange={(v) => setTweaks({ accent: v })}
            options={[
              { value: "sage", label: "Sage" },
              { value: "terracotta", label: "Terracotta" },
              { value: "rose", label: "Rose" },
            ]}
          />
          <TweakToggle
            label="Film grain"
            value={tweaks.grain}
            onChange={(v) => setTweaks({ grain: v })}
          />
        </TweakSection>
        <TweakSection title="Typography">
          <TweakSelect
            label="Scheme"
            value={tweaks.fontScheme}
            onChange={(v) => setTweaks({ fontScheme: v })}
            options={Object.entries(FONTS).map(([value, f]) => ({ value, label: f.label }))}
          />
          <div style={{
            marginTop: 10, padding: "10px 12px",
            borderRadius: 8,
            background: "rgba(0,0,0,0.04)",
            fontSize: 11, lineHeight: 1.4,
          }}>
            <div style={{ fontFamily: fonts.display, fontSize: 22, fontWeight: fonts.displayWeight, letterSpacing: fonts.displayTracking, lineHeight: 1.05 }}>
              English without stress
            </div>
            <div style={{ fontFamily: fonts.body, fontSize: 12, opacity: 0.65, marginTop: 4 }}>
              Sample body text — индивидуальные занятия
            </div>
          </div>
        </TweakSection>
        <TweakSection title="Layout">
          <TweakRadio
            label="Hero"
            value={tweaks.heroLayout}
            onChange={(v) => setTweaks({ heroLayout: v })}
            options={[
              { value: "split", label: "Split (фото справа)" },
              { value: "stacked", label: "Stacked (фото сверху)" },
              { value: "magazine", label: "Magazine (overlap)" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

function NavBar({ t, lang, setLang, currency, setCurrency }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", on, { passive: true });
    on();
    return () => window.removeEventListener("scroll", on);
  }, []);

  // Close mobile menu on Esc and lock body scroll while it's open.
  useEffect(() => {
    if (!menuOpen) return;
    const onKey = (e) => { if (e.key === "Escape") setMenuOpen(false); };
    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;
    };
  }, [menuOpen]);

  const close = () => setMenuOpen(false);

  const links = [
    { href: "#about", label: t.nav.about },
    { href: "#pricing", label: t.nav.pricing },
    { href: "#how", label: t.nav.courses },
    { href: "#resources", label: t.nav.resources },
    { href: "#reviews", label: t.nav.reviews },
    { href: "#faq", label: t.nav.faq },
  ];

  return (
    <header className={`nav ${scrolled ? "nav--scrolled" : ""}`}>
      <div className="nav__inner">
        <a href="#top" className="nav__logo">
          <span className="nav__logo-mark">A</span>
          <span className="nav__logo-text">Alina · English</span>
        </a>
        <nav className="nav__links">
          {links.map((l) => (
            <a key={l.href} href={l.href}>{l.label}</a>
          ))}
        </nav>
        <div className="nav__controls">
          <div className="pill-switch" role="group" aria-label="Language">
            <button
              className={lang === "ru" ? "on" : ""}
              onClick={() => setLang("ru")}
            >
              RU
            </button>
            <button
              className={lang === "ua" ? "on" : ""}
              onClick={() => setLang("ua")}
            >
              UA
            </button>
          </div>
          <div className="pill-switch" role="group" aria-label="Currency">
            <button
              className={currency === "gbp" ? "on" : ""}
              onClick={() => setCurrency("gbp")}
            >
              £
            </button>
            <button
              className={currency === "eur" ? "on" : ""}
              onClick={() => setCurrency("eur")}
            >
              €
            </button>
          </div>
          <a href="#contact" className="nav__cta">
            {t.nav.contact}
          </a>
          <button
            className="nav__burger"
            aria-label={menuOpen ? t.nav.menuClose : t.nav.menuOpen}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((o) => !o)}
          >
            <span className={`nav__burger-icon ${menuOpen ? "is-open" : ""}`}>
              <span /><span /><span />
            </span>
          </button>
        </div>
      </div>

      {menuOpen && (
        <div className="nav__sheet" role="dialog" aria-modal="true">
          <div className="nav__sheet-backdrop" onClick={close} />
          <div className="nav__sheet-panel">
            <nav className="nav__sheet-links">
              {links.map((l) => (
                <a key={l.href} href={l.href} onClick={close}>
                  {l.label}
                </a>
              ))}
            </nav>
            <a href="#contact" className="btn btn--primary nav__sheet-cta" onClick={close}>
              {t.nav.contact}
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

function Hero({ t, layout }) {
  return (
    <section id="top" className={`hero hero--${layout}`}>
      <div className="hero__inner">
        <div className="hero__copy">
          <div className="kicker">
            <span className="kicker__dot" />
            {t.hero.kicker}
          </div>
          <h1 className="hero__title">
            <span>{t.hero.title1}</span>
            <span className="hero__em"> {t.hero.title2} </span>
            <span>{t.hero.title3}</span>
          </h1>
          <p className="hero__sub">{t.hero.sub}</p>
          <div className="hero__cta-row">
            <a href="#contact" className="btn btn--primary">
              {t.hero.cta}
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path
                  d="M5 12h14M13 5l7 7-7 7"
                  stroke="currentColor"
                  strokeWidth="1.8"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </a>
            <div className="hero__cta-sub">{t.hero.ctaSub}</div>
          </div>
          <div className="hero__badges">
            <Badge label={t.hero.badge1} />
            <Badge label={t.hero.badge2} />
            <Badge label={t.hero.badge3} />
          </div>
        </div>
        <div className="hero__portrait">
          <div className="portrait">
            <img src="assets/alina-portrait.jpeg" alt="Alina" />
            <div className="portrait__tag">
              <span className="portrait__tag-dot" />
              Available · new students
            </div>
          </div>
          <div className="portrait__caption">
            <span className="portrait__caption-num">01</span>
            <span className="portrait__caption-line" />
            <span className="portrait__caption-text">Your tutor, Alina</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Badge({ label }) {
  return (
    <span className="badge">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path
          d="M12 2l2.5 6.5L21 10l-5 4.5L17.5 22 12 18l-5.5 4L8 14.5 3 10l6.5-1.5L12 2z"
          stroke="currentColor"
          strokeWidth="1.4"
          strokeLinejoin="round"
        />
      </svg>
      {label}
    </span>
  );
}

function About({ t }) {
  return (
    <section id="about" className="about">
      <div className="about__inner">
        <div className="about__left">
          <div className="about__photo-frame">
            <img src="assets/alina-with-book.jpg" alt="Alina with English File textbook" loading="lazy" />
          </div>
        </div>
        <div className="about__right">
          <div className="kicker">
            <span className="kicker__dot" />
            {t.about.kicker}
          </div>
          <h2 className="section-title">{t.about.title}</h2>
          <p className="about__p">{t.about.p1}</p>
          <p className="about__p">{t.about.p2}</p>
          <p className="about__p about__p--em">{t.about.p3}</p>

          <div className="about__facts">
            <div className="about__facts-title">{t.about.factsTitle}</div>
            <div className="about__facts-list">
              {t.about.levels.map((lv, i) => (
                <span key={i} className="about__chip">{lv}</span>
              ))}
            </div>
          </div>

          <div className="about__signature">
            <svg viewBox="0 0 200 60" width="140" height="42" aria-hidden="true">
              <path
                d="M10 40 C 20 10, 40 10, 50 30 S 80 50, 90 30 S 120 10, 140 35 S 170 45, 190 25"
                stroke="currentColor"
                strokeWidth="1.5"
                fill="none"
                strokeLinecap="round"
              />
            </svg>
            <span>— Alina</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Pricing({ t, currency, setCurrency, prices }) {
  const c = currency;
  const price = (k) => prices[k][c];
  const hourly = c === "gbp" ? "£13" : "€15";
  const pack4Per = c === "gbp" ? "£11.25" : "€13.25";
  const pack8Per = c === "gbp" ? "£10.75" : "€12.60";

  return (
    <section id="pricing" className="pricing">
      <div className="pricing__head">
        <div>
          <div className="kicker">
            <span className="kicker__dot" />
            {t.pricing.kicker}
          </div>
          <h2 className="section-title">{t.pricing.title}</h2>
          <p className="pricing__sub">{t.pricing.sub}</p>
        </div>
        <div className="pricing__switcher">
          <span className="pricing__switcher-label">{t.pricing.pickerLabel}</span>
          <div className="pill-switch pill-switch--lg">
            <button
              className={c === "gbp" ? "on" : ""}
              onClick={() => setCurrency("gbp")}
            >
              £ GBP
            </button>
            <button
              className={c === "eur" ? "on" : ""}
              onClick={() => setCurrency("eur")}
            >
              € EUR
            </button>
          </div>
        </div>
      </div>

      <div className="pricing__grid">
        <PriceCard
          variant="trial"
          eyebrow={t.pricing.free}
          title={t.pricing.cards.trial.title}
          price={fmt(0, c)}
          unit=""
          desc={t.pricing.cards.trial.desc}
          bullets={t.pricing.cards.trial.bullets}
          ctaLabel={t.pricing.book}
          t={t}
        />
        <PriceCard
          title={t.pricing.cards.single.title}
          price={fmt(price("single"), c)}
          unit={t.pricing.perHour}
          desc={t.pricing.cards.single.desc}
          bullets={t.pricing.cards.single.bullets}
          ctaLabel={t.pricing.book}
          t={t}
        />
        <PriceCard
          title={t.pricing.cards.pack4.title}
          price={fmt(price("pack4"), c)}
          unit={t.pricing.perPack}
          subPrice={`${pack4Per} / ${t.pricing.perHour}`}
          save={`−5%`}
          desc={t.pricing.cards.pack4.desc}
          bullets={t.pricing.cards.pack4.bullets}
          ctaLabel={t.pricing.book}
          t={t}
        />
        <PriceCard
          variant="popular"
          eyebrow={t.pricing.popular}
          title={t.pricing.cards.pack8.title}
          price={fmt(price("pack8"), c)}
          unit={t.pricing.perPack}
          subPrice={`${pack8Per} / ${t.pricing.perHour}`}
          save={`−10%`}
          desc={t.pricing.cards.pack8.desc}
          bullets={t.pricing.cards.pack8.bullets}
          ctaLabel={t.pricing.book}
          t={t}
        />
        <PriceCard
          title={t.pricing.cards.intensive.title}
          price={fmt(price("intensive"), c)}
          unit={t.pricing.perCourse}
          subPrice={`12 × 60 min`}
          desc={t.pricing.cards.intensive.desc}
          bullets={t.pricing.cards.intensive.bullets}
          ctaLabel={t.pricing.book}
          t={t}
        />
        <PriceCard
          variant="tbd"
          title={t.pricing.cards.everyday.title}
          price="TBD"
          unit=""
          desc={t.pricing.cards.everyday.desc}
          bullets={t.pricing.cards.everyday.bullets}
          ctaLabel={t.pricing.book}
          t={t}
        />
      </div>
    </section>
  );
}

function PriceCard({
  variant,
  eyebrow,
  title,
  price,
  unit,
  subPrice,
  save,
  desc,
  bullets,
  ctaLabel,
  t,
}) {
  return (
    <article className={`pc pc--${variant || "default"}`}>
      {eyebrow && <div className="pc__eyebrow">{eyebrow}</div>}
      <h3 className="pc__title">{title}</h3>
      <div className="pc__price-row">
        <span className="pc__price">{price}</span>
        {unit && <span className="pc__unit">{unit}</span>}
        {save && <span className="pc__save">{save}</span>}
      </div>
      {subPrice && <div className="pc__subprice">{subPrice}</div>}
      <p className="pc__desc">{desc}</p>
      <ul className="pc__bullets">
        {bullets.map((b, i) => (
          <li key={i}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path
                d="M4 12l5 5L20 6"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
            {b}
          </li>
        ))}
      </ul>
      <a href="#contact" className="pc__cta">
        {ctaLabel}
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
          <path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>
    </article>
  );
}

function HowItWorks({ t }) {
  return (
    <section id="how" className="how">
      <div className="how__head">
        <div className="kicker">
          <span className="kicker__dot" />
          {t.how.kicker}
        </div>
        <h2 className="section-title">{t.how.title}</h2>
      </div>
      <div className="how__grid">
        {t.how.steps.map((s, i) => (
          <div key={i} className="how__step">
            <div className="how__n">{s.n}</div>
            <h3 className="how__t">{s.t}</h3>
            <p className="how__d">{s.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function Reviews({ t }) {
  const trackRef = useRef(null);
  const [canPrev, setCanPrev] = useState(false);
  const [canNext, setCanNext] = useState(true);

  // Recompute arrow availability whenever the track scrolls or the viewport
  // resizes (which can change clientWidth and shift edges).
  useEffect(() => {
    const el = trackRef.current;
    if (!el) return;
    const update = () => {
      const max = el.scrollWidth - el.clientWidth;
      setCanPrev(el.scrollLeft > 4);
      setCanNext(el.scrollLeft < max - 4);
    };
    update();
    el.addEventListener("scroll", update, { passive: true });
    window.addEventListener("resize", update);
    return () => {
      el.removeEventListener("scroll", update);
      window.removeEventListener("resize", update);
    };
  }, [t.reviews.items.length]);

  const nudge = (dir) => {
    const el = trackRef.current;
    if (!el) return;
    const card = el.querySelector(".review");
    const gap = 20;
    const step = card ? card.offsetWidth + gap : el.clientWidth * 0.85;
    el.scrollBy({ left: dir * step, behavior: "smooth" });
  };

  return (
    <section id="reviews" className="reviews">
      <div className="reviews__head">
        <div className="reviews__head-text">
          <div className="kicker">
            <span className="kicker__dot" />
            {t.reviews.kicker}
          </div>
          <h2 className="section-title">{t.reviews.title}</h2>
        </div>
        <div className="reviews__nav" role="group" aria-label="Reviews carousel">
          <button
            type="button"
            className="reviews__btn"
            aria-label="Previous review"
            disabled={!canPrev}
            onClick={() => nudge(-1)}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
              <path d="M19 12H5M12 5l-7 7 7 7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>
          <button
            type="button"
            className="reviews__btn"
            aria-label="Next review"
            disabled={!canNext}
            onClick={() => nudge(1)}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
              <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>
        </div>
      </div>
      <div className="reviews__track-wrap">
        <div className="reviews__track" ref={trackRef} tabIndex="0">
          {t.reviews.items.map((r, i) => (
            <figure key={i} className="review">
              <svg className="review__mark" viewBox="0 0 40 32" aria-hidden="true">
                <path
                  d="M0 32V18C0 8 6 1 16 0v6c-5 1-9 5-9 10h9v16H0zm24 0V18C24 8 30 1 40 0v6c-5 1-9 5-9 10h9v16H24z"
                  fill="currentColor"
                />
              </svg>
              <blockquote>{r.q}</blockquote>
              <figcaption>
                <span className="review__a">{r.a}</span>
                <span className="review__role">{r.role}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function Resources({ t }) {
  const r = t.resources;
  return (
    <section id="resources" className="resources-hero">
      <div className="resources-hero__inner">
        <div className="resources-hero__top">
          <div className="kicker kicker--light">
            <span className="kicker__dot" />
            {r.kicker}
          </div>
          <span className="resources-hero__free">{r.free}</span>
        </div>

        <h2 className="resources-hero__title">{r.title}</h2>

        <div className="resources-hero__lines">
          <div className="resources-hero__line">
            <span className="resources-hero__bullet">→</span>
            {r.line1}
          </div>
          <div className="resources-hero__line">
            <span className="resources-hero__bullet">→</span>
            {r.line2}
          </div>
        </div>

        <a
          href="https://t.me/alinakobzareng"
          target="_blank"
          rel="noopener noreferrer"
          className="resources-hero__cta"
        >
          <span className="resources-hero__tg-icon">
            <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true">
              <path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19l-9.49 5.99-4.1-1.28c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71l-4.1-3.03-1.97 1.91c-.23.23-.42.42-.86.42z" />
            </svg>
          </span>
          <span className="resources-hero__cta-text">
            <span className="resources-hero__cta-handle">{r.tgHandle}</span>
            <span className="resources-hero__cta-label">{r.tgCta}</span>
          </span>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" className="resources-hero__cta-arrow">
            <path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>
      </div>
    </section>
  );
}

function FAQ({ t }) {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="faq">
      <div className="faq__head">
        <div className="kicker">
          <span className="kicker__dot" />
          {t.faq.kicker}
        </div>
        <h2 className="section-title">{t.faq.title}</h2>
      </div>
      <div className="faq__list">
        {t.faq.items.map((q, i) => (
          <div key={i} className={`faq__item ${open === i ? "is-open" : ""}`}>
            <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
              <span>{q.q}</span>
              <span className="faq__plus" aria-hidden="true">
                {open === i ? "×" : "–"}
              </span>
            </button>
            {open === i && <div className="faq__a">{q.a}</div>}
          </div>
        ))}
      </div>
    </section>
  );
}

const TG_USERNAME = "alinakobzareng";
const TG_URL = `https://t.me/${TG_USERNAME}`;

function TelegramGlyph({ size = 22 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden="true">
      <path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19l-9.49 5.99-4.1-1.28c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71l-4.1-3.03-1.97 1.91c-.23.23-.42.42-.86.42z" />
    </svg>
  );
}

function Contact({ t }) {
  const [sent, setSent] = useState(false);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  const cleanup = useRef(null);

  // Build a tidy message body that the user can paste into Telegram.
  const composeMessage = () => {
    const lines = [];
    if (name.trim()) lines.push(`${t.contact.name}: ${name.trim()}`);
    if (email.trim()) lines.push(`${t.contact.email}: ${email.trim()}`);
    if (message.trim()) {
      if (lines.length) lines.push("");
      lines.push(message.trim());
    }
    return lines.join("\n");
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const body = composeMessage();
    // Try modern clipboard API; fall back silently if unavailable.
    try {
      if (body && navigator.clipboard?.writeText) {
        await navigator.clipboard.writeText(body);
      }
    } catch (_) { /* clipboard blocked — proceed anyway */ }
    window.open(TG_URL, "_blank", "noopener,noreferrer");
    setSent(true);
    if (cleanup.current) clearTimeout(cleanup.current);
    cleanup.current = setTimeout(() => setSent(false), 12000);
  };

  return (
    <section id="contact" className="contact">
      <div className="contact__inner">
        <div className="contact__left">
          <div className="kicker">
            <span className="kicker__dot" />
            {t.contact.kicker}
          </div>
          <h2 className="section-title">{t.contact.title}</h2>
          <p className="contact__sub">{t.contact.sub}</p>

          <a
            href={TG_URL}
            target="_blank"
            rel="noopener noreferrer"
            className="contact__tg"
          >
            <span className="contact__tg-icon">
              <TelegramGlyph size={22} />
            </span>
            <span className="contact__tg-text">
              <span className="contact__tg-lead">{t.contact.tgLead}</span>
              <span className="contact__tg-handle">{t.contact.tgHandle}</span>
            </span>
            <span className="contact__tg-cta">
              {t.contact.tgCta}
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                <path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </span>
          </a>

          <p className="contact__reply-time">
            <span className="contact__reply-dot" />
            {t.contact.replyTime}
          </p>
        </div>

        <div className="contact__form-wrap">
          <p className="contact__form-intro">{t.contact.formIntro}</p>

          {sent ? (
            <div className="contact__sent" role="status" aria-live="polite">
              <div className="contact__sent-check" aria-hidden="true">✓</div>
              <h3 className="contact__sent-title">{t.contact.sentTitle}</h3>
              <p className="contact__sent-body">{t.contact.sentBody}</p>
              <a
                href={TG_URL}
                target="_blank"
                rel="noopener noreferrer"
                className="btn btn--primary contact__sent-cta"
              >
                <TelegramGlyph size={18} />
                {t.contact.sentCta}
              </a>
            </div>
          ) : (
            <form className="contact__form" onSubmit={handleSubmit}>
              <label className="field">
                <span>{t.contact.name}</span>
                <input
                  type="text"
                  required
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  autoComplete="name"
                />
              </label>
              <label className="field">
                <span>{t.contact.email}</span>
                <input
                  type="text"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  autoComplete="email"
                />
              </label>
              <label className="field">
                <span>{t.contact.message}</span>
                <textarea
                  rows="3"
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                />
              </label>
              <button type="submit" className="btn btn--primary contact__send">
                <TelegramGlyph size={18} />
                {t.contact.send}
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="footer__inner">
        <div className="footer__brand">
          <span className="nav__logo-mark">A</span>
          <span>Alina · English tutor</span>
        </div>
        <div className="footer__meta">
          <span>{t.footer.rights}</span>
          <span className="footer__dot">·</span>
          <span className="footer__built">{t.footer.built}</span>
        </div>
      </div>
    </footer>
  );
}

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