/* eu-sections.jsx — EU-specific section overrides
   Replaces the BD-specific copy with EU-appropriate messaging.
   Loaded instead of sections.jsx on the EU site.
*/
const { useState: useS2, useEffect: useSE2, useRef: useSR2 } = React;

/* Reuse the Counter component */
function Counter2({ to, dec = 0, plus = false, pct = false, children }) {
  const [v, setV] = useS2(0);
  const ref = useSR2(null);
  const done = useSR2(false);
  useSE2(() => {
    const el = ref.current; if (!el) return;
    const run = () => {
      if (done.current) return; done.current = true;
      const start = performance.now(), D = 1150;
      const tick = (now) => { const p = Math.min(1,(now-start)/D); setV(to*(1-Math.pow(1-p,3))); if(p<1)requestAnimationFrame(tick); };
      requestAnimationFrame(tick);
    };
    let io = null;
    if ("IntersectionObserver" in window) { io = new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting)run();}),{threshold:0.4}); io.observe(el); }
    const t = setTimeout(run,1300);
    return ()=>{if(io)io.disconnect();clearTimeout(t);};
  },[to]);
  const num = dec ? v.toFixed(dec) : Math.round(v).toLocaleString();
  return <strong ref={ref}>{num}{plus?"+":""}{pct?"%":""}{children}</strong>;
}

/* ---------- NAV ---------- */
function Nav() {
  const [open, setOpen] = useS2(false);
  const links = [["Services","#services"],["How it works","#how"],["Estimate","#estimate"],["Why us","#why"],["FAQ","#faq"]];
  return (
    <header className="nav" id="top">
      <div className="wrap nav-in">
        <a href="#top" className="brand" aria-label="NextStep Writers Europe">
          <img className="brand-logo logo-color" src="../assets/logo.png" alt="NextStep Writers" />
          <img className="brand-logo logo-white" src="../assets/logo-white.png" alt="NextStep Writers" />
        </a>
        <nav className={"nav-links"+(open?" open":"")}>
          {links.map(([t,h])=><a key={h} href={h} onClick={()=>setOpen(false)}>{t}</a>)}
        </nav>
        <div className="nav-cta">
          <span className="pill" style={{fontSize:11,background:"#eff6ff",color:"#0184D4",border:"1px solid #bfdbfe"}}>🌍 Europe</span>
          <a className="btn btn-ghost nav-wa" href="#estimate">Get a price</a>
          <a className="btn btn-primary" href="#estimate">Start an order</a>
        </div>
        <button className="nav-burger" onClick={()=>setOpen(o=>!o)} aria-label="menu">
          <span></span><span></span><span></span>
        </button>
      </div>
    </header>
  );
}

/* ---------- HERO ---------- */
function Hero() {
  const cfg = window.BRANCH_CONFIG || {};
  return (
    <section className="hero">
      <div className="wrap hero-in">
        <div className="hero-copy">
          <span className="eyebrow reveal">Academic guideline &amp; research support — Europe</span>
          <h1 className="display reveal" data-d="1">
            Research support<br />trusted by scholars<br /><span className="serif-italic accent-text">across Europe.</span>
          </h1>
          <p className="lede reveal" data-d="2">
            Expert-written theses, research articles, systematic reviews and ML models —
            priced transparently in EUR &amp; GBP, delivered on time, plagiarism-free.
          </p>
          <div className="hero-actions reveal" data-d="3">
            <a className="btn btn-accent btn-lg" href="#estimate">Get an instant estimate</a>
            <a className="btn btn-ghost btn-lg" href="#how">How it works</a>
          </div>
          <div className="hero-meta reveal" data-d="4">
            <div className="hero-stat"><Counter2 to={2400} plus /><span>projects delivered</span></div>
            <div className="hero-stat"><Counter2 to={50} plus /><span>disciplines</span></div>
            <div className="hero-stat"><Counter2 to={98} pct /><span>on-time</span></div>
            <div className="hero-stat"><Counter2 to={4.9} dec={1}><em>/5</em></Counter2><span>client rating</span></div>
          </div>
        </div>
        <aside className="hero-card reveal" data-d="3">
          <div className="hc-tag mono">INSTANT ESTIMATE</div>
          <div className="hc-row"><span>PhD · Thesis</span><span className="mono">12,000 words</span></div>
          <div className="hc-bar"><i style={{width:"78%"}}></i></div>
          <div className="hc-row"><span>Regression analysis</span><span className="mono">+ dataset</span></div>
          <div className="hc-total">
            <span className="mono">est. total</span>
            <strong className="serif-italic">€ 595</strong>
          </div>
          <a className="btn btn-wa hc-btn" href="#estimate"><span aria-hidden="true">✆</span> Build yours</a>
          <p className="hc-fine mono">Live calculator below · confirm by email or WhatsApp</p>
        </aside>
      </div>
    </section>
  );
}

/* ---------- MARQUEE ---------- */
function Marquee() {
  const items = ["Public Health","Economics","Computer Science","Nursing","Psychology","Management",
    "Biotechnology","Education","Civil Engineering","Sociology","Data Science","Pharmacy","Finance","Linguistics"];
  const row = [...items,...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {row.map((x,i)=><span key={i} className="marquee-item">{x}<i>◦</i></span>)}
      </div>
    </div>
  );
}

/* ---------- SERVICES ---------- */
function Services() {
  const N = window.NSW;
  const froms = {assignment:"€45",article:"€50",thesis:"€95",sysreview:"€120",mlmodel:"€150",conversion:"€55",formatting:"€1/pg"};
  return (
    <section className="section" id="services">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">What we write</span>
          <h2 className="h2">Seven services, one standard of rigour.</h2>
          <p className="lede">Every project matched to a specialist who works in your field.</p>
        </div>
        <div className="svc-list">
          {N.SERVICES.map((s,i)=>(
            <article className="svc-row reveal" data-d={(i%4)+1} key={s.id}>
              <span className="svc-row-ico" aria-hidden="true">{s.icon}</span>
              <div className="svc-row-body">
                <h3 className="svc-row-name">{s.name}</h3>
                <p className="svc-row-blurb">{s.blurb}</p>
              </div>
              <div className="svc-row-from">
                <span className="mono">from</span>
                <strong>{froms[s.id]}</strong>
              </div>
              <a className="svc-row-link" href="#estimate" aria-label={"Price "+s.name}>→</a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- HOW IT WORKS ---------- */
function How() {
  const steps = [
    {n:"01",t:"Build your estimate",d:"Use the live calculator — pick your service, level, length, methodology and deadline. Price updates instantly.",tag:"60 seconds"},
    {n:"02",t:"Send us your brief",d:"Email or WhatsApp your order summary. A subject expert reviews your requirements and confirms the final quote.",tag:"Email · WhatsApp"},
    {n:"03",t:"Secure payment",d:"Pay 50% to start via Stripe, PayPal or bank transfer. The balance is due on delivery — no surprises.",tag:"Stripe · PayPal"},
    {n:"04",t:"Track & receive",d:"Milestone drafts keep you informed. Up to three free revisions included until the work meets your expectations.",tag:"Milestone updates"},
  ];
  return (
    <section className="section on-ink-bg" id="how">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow on-ink">How it works</span>
          <h2 className="h2">From first message to final draft.</h2>
        </div>
        <div className="steps">
          {steps.map((s,i)=>(
            <div className="step reveal" data-d={i+1} key={s.n}>
              <span className="step-n serif-italic">{s.n}</span>
              <span className="pill step-tag">{s.tag}</span>
              <h3 className="step-t">{s.t}</h3>
              <p className="step-d">{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- ESTIMATE ---------- */
function Estimate() {
  return (
    <section className="section estimate" id="estimate">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Transparent pricing — EUR &amp; GBP</span>
          <h2 className="h2">Build your project. See the price instantly.</h2>
          <p className="lede">Prices shown in EUR and GBP. No hidden fees. Send your spec directly to your expert.</p>
        </div>
        <div className="calc-shell reveal" data-d="1">
          <window.NSWCalculator />
        </div>
      </div>
    </section>
  );
}

/* ---------- WHY ---------- */
function Why() {
  const feats = [
    {i:"🔒",t:"Strict confidentiality",d:"Your identity, brief and data stay within your project team. NDAs available on request."},
    {i:"✓",t:"Plagiarism &amp; AI-free",d:"Original writing every time — with optional Turnitin and AI-detection reports on any order."},
    {i:"◷",t:"On-time, every time",d:"98% of projects delivered on or before deadline, with milestone drafts throughout."},
    {i:"✦",t:"Subject-expert writers",d:"MPhil and PhD-qualified specialists matched by field and level — not generalists."},
    {i:"↻",t:"Free revisions",d:"Up to three revision rounds included. We keep refining until the work meets your supervisor's expectations."},
    {i:"▦",t:"Secure EU-friendly payments",d:"Pay safely via Stripe or PayPal. 50% advance to start, balance on delivery."},
  ];
  return (
    <section className="section" id="why">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Why researchers choose us</span>
          <h2 className="h2">Serious support you can trust.</h2>
        </div>
        <div className="feat-grid">
          {feats.map((f,i)=>(
            <div className="feat reveal" data-d={(i%3)+1} key={f.t}>
              <span className="feat-ico" aria-hidden="true">{f.i}</span>
              <h3 className="feat-t">{f.t}</h3>
              <p className="feat-d" dangerouslySetInnerHTML={{__html:f.d}}></p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- TESTIMONIALS ---------- */
function Testimonials() {
  const t = [
    {q:"The SEM chapter was exactly what my supervisor asked for. Delivered two days early with a clean Turnitin report.",n:"PhD candidate",m:"Public Health · United Kingdom"},
    {q:"A rigorous systematic review following PRISMA, with a reproducible search strategy. The reviewers had almost nothing to add.",n:"Lecturer",m:"Nursing · Netherlands"},
    {q:"They converted my thesis into a Q2 journal article. Accepted on the first submission.",n:"Postdoctoral researcher",m:"Economics · Germany"},
  ];
  return (
    <section className="section testimonials on-ink-bg">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow on-ink">In their words</span>
          <h2 className="h2">Work that holds up to a committee.</h2>
        </div>
        <div className="tcards">
          {t.map((x,i)=>(
            <figure className="tcard reveal" data-d={i+1} key={i}>
              <div className="tstars" aria-hidden="true">★★★★★</div>
              <blockquote>"{x.q}"</blockquote>
              <figcaption><strong>{x.n}</strong><span>{x.m}</span></figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FAQ() {
  const [open, setOpen] = useS2(0);
  const qs = [
    ["Is this ethical / how should I use the work?","We provide model work, research and analysis as a learning and drafting aid. You are responsible for using it in line with your institution's academic integrity policy."],
    ["How is the final price decided?","The calculator gives a transparent estimate. Your assigned expert confirms the final quote by email or WhatsApp once they have reviewed your full brief and any files you share."],
    ["Do you handle data analysis and ML models?","Yes — from descriptive stats and regression to SEM, meta-analysis, and machine-learning models including deep learning and NLP, with a full written methods-and-results section."],
    ["What about plagiarism and AI detection?","All work is written from scratch. Add a Turnitin report and an AI-detection (GPTZero) report to any order from the calculator."],
    ["How do payments work in Europe?","We accept Stripe (cards, Apple/Google Pay), PayPal and bank transfer. Start with a 50% advance; the balance is due on delivery."],
    ["What if I need changes?","Up to three revision rounds are included free of charge. We keep refining until the work meets your supervisor's expectations."],
  ];
  return (
    <section className="section" id="faq">
      <div className="wrap faq-wrap">
        <div className="sec-head reveal"><span className="eyebrow">Questions</span><h2 className="h2">Good to know.</h2></div>
        <div className="faq-list reveal" data-d="1">
          {qs.map(([q,a],i)=>(
            <div className={"faq-item"+(open===i?" open":"")} key={i}>
              <button className="faq-q" onClick={()=>setOpen(open===i?-1:i)}>
                <span>{q}</span><i aria-hidden="true">{open===i?"–":"+"}</i>
              </button>
              <div className="faq-a"><p>{a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- FOOTER ---------- */
function Footer() {
  const cfg = window.BRANCH_CONFIG || {};
  const contactHref = cfg.contact?.type === 'email'
    ? 'mailto:' + (cfg.contact?.address || 'contact@nextstepwriters.eu')
    : '#estimate';
  return (
    <>
      <section className="section cta" id="pay-eps">
        <div className="wrap cta-in reveal">
          <h2 className="h2">Ready to take the next step?</h2>
          <p className="lede">Build your estimate, send it over, and have an expert on it today.</p>
          <div className="cta-actions">
            <a className="btn btn-accent btn-lg" href="#estimate">Get your estimate</a>
            <a className="btn btn-wa btn-lg" href={contactHref}>
              <span aria-hidden="true">{cfg.contact?.type==='email'?'✉':'✆'}</span>
              {cfg.contact?.type==='email'?'Email us':'Message on WhatsApp'}
            </a>
          </div>
          <p className="cta-fine mono">Stripe · PayPal · Bank transfer · 50% advance · balance on delivery · GDPR compliant</p>
        </div>
      </section>
      <footer className="footer">
        <div className="wrap footer-in">
          <div className="footer-brand">
            <a href="#top" className="brand">
              <img className="brand-logo logo-white" src="../assets/logo-white.png" alt="NextStep Writers" />
            </a>
            <p>Subject-expert academic ghostwriting &amp; research support — serving researchers across Europe.</p>
          </div>
          <div className="footer-col">
            <h4>Services</h4>
            <a href="#services">Thesis &amp; dissertation</a>
            <a href="#services">Research articles</a>
            <a href="#services">Systematic reviews</a>
            <a href="#services">ML prediction models</a>
          </div>
          <div className="footer-col">
            <h4>Company</h4>
            <a href="#how">How it works</a>
            <a href="#why">Why us</a>
            <a href="#faq">FAQ</a>
            <a href="#estimate">Pricing</a>
          </div>
          <div className="footer-col">
            <h4>Get in touch</h4>
            <a href={contactHref}>{cfg.contact?.type==='email'?'Email us':'WhatsApp us'}</a>
            <a href="#estimate">Get an estimate</a>
            <span className="footer-pay mono">Stripe · PayPal · Bank transfer</span>
          </div>
          <div className="footer-col">
            <h4>Legal</h4>
            <a href="legal/terms.html">Terms &amp; Conditions</a>
            <a href="legal/privacy.html">Privacy Policy</a>
            <a href="legal/refund.html">Refund Policy</a>
          </div>
        </div>
        <div className="wrap footer-base mono">
          <span>© {new Date().getFullYear()} NextStep Writers</span>
          <span>GDPR compliant · Confidential · Plagiarism-free</span>
        </div>
      </footer>
    </>
  );
}

Object.assign(window, { Nav, Hero, Marquee, Services, How, Estimate, Why, Testimonials, FAQ, Footer });