/* results-faq-footer.jsx — Results, FAQ accordion, Footer */

/* ---- animated lighthouse ring ---- */
function LightRing({ label, value = 100, delay = 0 }) {
  const ref = useRef(null);
  const [on, setOn] = useState(false);
  const [num, setNum] = useState(0);
  useEffect(() => {
    const node = ref.current;
    const io = new IntersectionObserver((es) => {
      if (es[0].isIntersecting) {
        setTimeout(() => {
          setOn(true);
          const start = performance.now();
          const tick = (now) => {
            const p = Math.min(1, (now - start) / 1300);
            setNum(Math.round(value * (1 - Math.pow(1 - p, 3))));
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }, delay);
        io.disconnect();
      }
    }, { threshold: 0.5 });
    if (node) io.observe(node);
    return () => io.disconnect();
  }, [value, delay]);

  const r = 40, c = 2 * Math.PI * r;
  return (
    <div className="lh" ref={ref}>
      <div className="ring">
        <svg width="88" height="88">
          <circle cx="44" cy="44" r={r} fill="none" stroke="var(--line)" strokeWidth="4" />
          <circle cx="44" cy="44" r={r} fill="none" stroke="var(--accent)" strokeWidth="4" strokeLinecap="round"
            strokeDasharray={c} strokeDashoffset={on ? 0 : c}
            style={{ transition: "stroke-dashoffset 1.3s cubic-bezier(0.22,1,0.36,1)" }} />
        </svg>
        <div className="num">{num}</div>
      </div>
      <div className="lhl">{label}</div>
    </div>
  );
}

const RESULTS = [
  { v: "93M", l: "Page views" },
  { v: "3M", l: "Unique users" },
  { v: "1B+", l: "Network requests" },
];
const FEATS_A = [
  { k: "01", t: "On-page SEO", d: "Ready to be found on Google." },
  { k: "02", t: "Tracking & Analytics", d: "User stats & marketing insight." },
  { k: "03", t: "100% Responsive", d: "Desktop, tablet, mobile — everything between." },
  { k: "04", t: "ROI-first", d: "Most out of every ad euro." },
];
const FLOW = [
  { l: "A", t: "Briefing", s: "Start" },
  { l: "B", t: "Concept", s: "Route" },
  { l: "C", t: "Design", s: "Look" },
  { l: "D", t: "Build", s: "Code" },
  { l: "Z", t: "Operate", s: "Live" },
];

function Results() {
  return (
    <section className="section" id="results" data-screen-label="Results">
      <div className="wrap">
        <div className="sec-head reveal">
          <div className="left">
            <Eyebrow n="08">Results · Last 12 months</Eyebrow>
            <h2 className="headline">Websites, optimized<br />for <em>real outcomes.</em></h2>
          </div>
          <p className="lede">Driven by real client projects — measured, not estimated.</p>
        </div>

        <div className="results-top reveal">
          {RESULTS.map((r) => (
            <div className="rc" key={r.l}>
              <div className="rv">{r.v}</div>
              <div className="rl">{r.l}</div>
            </div>
          ))}
        </div>

        <div className="results-bottom">
          <div className="reveal">
            <h3 style={{ fontSize: "clamp(20px,2.2vw,28px)", fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 18 }}>
              <Emphi text="Built for *real outcomes.*" />
            </h3>
            <div className="feat-list">
              {FEATS_A.map((x) => (
                <div className="feat" key={x.k}>
                  <span className="fk">{x.k}</span>
                  <div>
                    <div className="ft2">{x.t}</div>
                    <div className="fd">{x.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="reveal d2">
            <h3 style={{ fontSize: "clamp(20px,2.2vw,28px)", fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 18 }}>
              <Emphi text="From A to *Z, one team.*" />
            </h3>
            <p style={{ color: "var(--ink-soft)", marginBottom: 22 }}>
              Briefing, concept, design, build, operations — no handoffs between specialists. You talk to the studio that actually builds, the whole time. <strong style={{ color: "var(--ink)", fontWeight: 500 }}>0 handoffs.</strong>
            </p>
            <div className="feat-list">
              {FLOW.map((x) => (
                <div className="feat" key={x.l}>
                  <span className="fk" style={{ fontSize: 16, fontWeight: 600 }}>{x.l}</span>
                  <div style={{ display: "flex", justifyContent: "space-between", width: "100%" }}>
                    <span className="ft2">{x.t}</span>
                    <span className="fd">{x.s}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="reveal" style={{ marginTop: "clamp(40px,5vw,72px)" }}>
          <div className="sec-head" style={{ marginBottom: 28 }}>
            <div className="left">
              <Eyebrow n="09">Google Lighthouse · Live</Eyebrow>
              <h3 style={{ fontSize: "clamp(24px,3vw,40px)", fontWeight: 600, letterSpacing: "-0.03em" }}>
                Four scores. <em style={{ fontStyle: "italic", fontWeight: 500 }}>All 100.</em>
              </h3>
            </div>
          </div>
          <div className="lh-grid">
            <LightRing label="Performance" delay={0} />
            <LightRing label="Accessibility" delay={120} />
            <LightRing label="Best Practices" delay={240} />
            <LightRing label="SEO" delay={360} />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- FAQ ---- */
const FAQ = [
  { q: "What does a website at Auren cost?", a: "Every project begins with a custom website mockup and a transparent fixed quote. You'll know exactly what we're building and what it costs before any work begins. We proceed only after your approval." },
  { q: "How long does a project take?", a: "Most custom websites are delivered within 3–5 days, while software projects typically take 8–12 days. A clear timeline and delivery schedule will be provided before the project begins." },
  { q: "Which technologies do you use?", a: "Default stack: Next.js 16, React 19, TypeScript 5, Tailwind CSS 4, Supabase (Postgres), Stripe and Vercel. CMS varies by project (Sanity, Payload, Contentful). No WordPress, no Wix." },
  { q: "Who works on the project — a team or one person?", a: "Edward Blake — founder, designer, and developer. Every project is handled personally from concept to launch, ensuring clear communication, consistent quality, and a seamless experience throughout the process." },
];

function FaqItem({ item, n, open, onToggle }) {
  const ref = useRef(null);
  const [h, setH] = useState(0);
  useEffect(() => { setH(open ? ref.current.scrollHeight : 0); }, [open]);
  return (
    <div className={"faq-item" + (open ? " open" : "")}>
      <button className="faq-q" onClick={onToggle} aria-expanded={open}>
        <span className="fqn">{n}</span>
        <span className="fqt">{item.q}</span>
        <span className="fqi"></span>
      </button>
      <div className="faq-a" style={{ height: h }}>
        <div className="inner" ref={ref}>{item.a}</div>
      </div>
    </div>
  );
}

function Faq() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq" data-screen-label="FAQ">
      <div className="wrap">
        <div className="sec-head reveal">
          <div className="left">
            <Eyebrow n="05">FAQ · Frequently asked</Eyebrow>
            <h2 className="headline">Answers <em>up front.</em></h2>
          </div>
        </div>
        <div className="faq-list reveal">
          {FAQ.map((item, i) => (
            <FaqItem key={i} item={item} n={String(i + 1).padStart(2, "0")} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- footer ---- */
function Footer({ onStart }) {
  return (
    <footer className="footer" id="footer">
      <div className="wrap">
        <div className="footer-top">
          <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
            <Logo size={40} />
            <button className="btn btn-primary" style={{ marginTop: 16, marginLeft: 35 }} onClick={onStart}>Start a project <ArrowUR cls="ar" /></button>
          </div>
          <div className="footer-col">
            <h4>Sitemap</h4>
            <ul>
              <li><a href="#services">Services</a></li>
              <li><a href="#process">Process</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div className="footer-col privacy-shift">
            <h4>Privacy</h4>
            <ul>
              <li><a href="Terms and Conditions.html">Terms and Conditions <ArrowUR size={13} /></a></li>
              <li><a href="Privacy Policy.html">Privacy Policy <ArrowUR size={13} /></a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <ul>
              <li><a href="#contact">info@auren.studio</a></li>
              <li><a href="https://www.instagram.com/edward.blake_/" target="_blank" rel="noopener noreferrer">Instagram <ArrowUR size={13} /></a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span className="fb-meta">© 2026 Auren · Edward Blake</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Results, Faq, Footer, LightRing });