/* ==========================================================================
   Bottom Sections — Process, Results, Testimonial, CTA, Footer
   ========================================================================== */

/* ===== PROCESS — LIVE IN 21 DAYS ===== */
function ProcessSection() {
  const steps = [
    {
      step: 1,
      title: 'Discovery call',
      desc: 'We map your current workflow, identify which bottlenecks cost you the most time and money, and agree on a build plan for your first system.',
    },
    {
      step: 2,
      title: 'Build & integrate',
      desc: 'We build every automation, connect your existing tools, and test the full sequence end-to-end before touching anything you use.',
    },
    {
      step: 3,
      title: 'Handoff & scale',
      desc: "You get a walkthrough, full documentation, and 30-day support. Once it's running, we scope the next system together.",
    },
  ];

  return (
    <section className="process section-pad" id="process">
      <div className="wrap">
        <div className="process-header reveal">
          <p className="eyebrow">Process</p>
          <h2 className="section-title">Live in 21 days</h2>
          <p className="process-sub">Three stages, done with you — no tech skills required on your end.</p>
        </div>

        <div className="stepper-nav reveal reveal-d1">
          {steps.map((s, i) => {
            const isLast = i === steps.length - 1;
            return (
              <div key={s.step} className="stepper-row">
                {/* Indicator + vertical line column */}
                <div className="stepper-track">
                  <div className="stepper-indicator" data-state="completed">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
                      <polyline points="2.5,7 5.5,10 11.5,4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </div>
                  {!isLast && <div className="stepper-separator" data-state="completed"></div>}
                </div>

                {/* Text column */}
                <div className="stepper-label">
                  <div className="stepper-title">{s.title}</div>
                  <div className="stepper-description">{s.desc}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ===== RESULTS ===== */
function ResultsSection() {
  const stats = [
    { value: '15+', label: 'hours per week saved on admin and follow-up' },
    { value: '3×', label: 'more booked calls from the same pool of leads' },
    { value: '30%', label: 'reduction in client churn rate thanks to better onboarding' },
  ];

  return (
    <section className="results section-pad-lg" id="results">
      <div className="wrap">
        <div className="results-header reveal">
          <p className="eyebrow">Results</p>
          <h2 className="section-title">Numbers coaches care about</h2>
          <p className="results-sub">What coaches report after their first 60 days with Elvaio systems running.</p>
        </div>
        <div className="results-grid reveal reveal-d1">
          {stats.map((s, i) => (
            <div key={i} className="result-stat">
              <div className="result-value">{s.value}</div>
              <div className="result-label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== TESTIMONIAL ===== */
function TestimonialSection() {
  return (
    <section className="testimonial section-pad" id="testimonial">
      <div className="wrap">
        <div className="testimonial-inner reveal">
          <blockquote className="testimonial-quote">
            "I was spending my Sundays catching up on DMs and onboarding
            emails. Elvaio automated all of it. Two weeks in, I had my first fully
            hands-off close."
          </blockquote>
          <div className="testimonial-attr">
            <span className="testimonial-name">Fitness coach</span>
            <span className="testimonial-meta">6K followers</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== VISUAL BOOKING CALENDAR =====
   A compact, decorative month calendar. Clicking any day opens the real
   cal.com booking page in a new tab — no heavy iframe embedded on the page.
   CAL_LINK is the path after "cal.com/". */
const CAL_LINK = "michael-rofaeil-uyudm0/30min"; // cal.com booking link (path after cal.com/)
const CAL_BOOKING_URL = "https://cal.com/" + CAL_LINK;

function CalVisual({ url }) {
  const { useState } = React;
  const [view, setView] = useState(new Date());

  const openBooking = () => window.open(url, "_blank", "noopener,noreferrer");

  const year = view.getFullYear();
  const month = view.getMonth();
  const monthNames = ["January","February","March","April","May","June","July","August","September","October","November","December"];

  const firstDay = new Date(year, month, 1);
  const start = new Date(firstDay);
  start.setDate(start.getDate() - firstDay.getDay());
  const today = new Date();
  today.setHours(0, 0, 0, 0);

  const days = [];
  for (let i = 0; i < 42; i++) {
    const d = new Date(start);
    d.setDate(start.getDate() + i);
    days.push({
      date: d,
      inMonth: d.getMonth() === month,
      isToday: d.toDateString() === today.toDateString(),
    });
  }

  return (
    <div className="cal-visual" role="group" aria-label="Pick a day to book a call">
      <div className="cal-visual-head">
        <button className="cal-visual-nav" onClick={() => setView(new Date(year, month - 1, 1))} aria-label="Previous month">‹</button>
        <span className="cal-visual-title">{monthNames[month]} {year}</span>
        <button className="cal-visual-nav" onClick={() => setView(new Date(year, month + 1, 1))} aria-label="Next month">›</button>
      </div>
      <div className="cal-visual-grid">
        {["S","M","T","W","T","F","S"].map((d, i) => (
          <div key={i} className="cal-visual-wd">{d}</div>
        ))}
        {days.map((day, i) => {
          const cls = ["cal-visual-day"];
          if (!day.inMonth) cls.push("is-out");
          if (day.isToday) cls.push("is-today");
          return (
            <button
              key={i}
              className={cls.join(" ")}
              onClick={openBooking}
              disabled={!day.inMonth}
              aria-label={`Book a call — ${day.date.toDateString()}`}
            >
              {day.date.getDate()}
            </button>
          );
        })}
      </div>
    </div>
  );
}

/* ===== FINAL CTA ===== */
function FinalCTA() {
  return (
    <section className="final-cta" id="cta">
      <div className="final-cta-card reveal">
        <span className="final-cta-badge">Ready to automate?</span>
        <h2 className="final-cta-title">
          Stop losing leads.<br />
          <span className="editorial-italic accent-text">Start closing them.</span>
        </h2>
        <p className="final-cta-sub">
          Book a free 30-minute strategy call and we'll show you exactly what
          we'd build — no pressure, just a clear plan.
        </p>
        <div className="final-cta-cal">
          <CalVisual url={CAL_BOOKING_URL} />
        </div>
      </div>
    </section>
  );
}

/* ===== FAQ ===== */
function FAQSection() {
  const { useState } = React;
  const [open, setOpen] = useState(0);

  const faqs = [
    {
      q: 'Do I need any technical skills to use this?',
      a: "None. We build, connect, and test everything for you. You get a plain-English walkthrough and full documentation — your only job is showing up to coach.",
    },
    {
      q: 'How long until my first system is live?',
      a: "Most first systems are live within 21 days: a discovery call to map your workflow, the build and integration phase, then handoff with 30 days of support.",
    },
    {
      q: 'Will this work with the tools I already use?',
      a: "Yes. We build on top of what you already have — Instagram, Gmail, Calendly, Stripe, your CRM and course platform. No rip-and-replace, no learning a new dashboard.",
    },
    {
      q: 'Is my client data safe?',
      a: "Your data stays inside your own accounts. We connect tools through their official, permissioned integrations — we never store your client lists or payment data on our side.",
    },
    {
      q: 'What does it cost?',
      a: "It depends on which systems you need. The free workflow audit gives you a custom plan and a fixed quote before you commit to anything — no surprises, no retainer traps.",
    },
    {
      q: 'What if I want to change or add a system later?',
      a: "That's the point. Once your first system is running, we scope the next one together. Systems are modular — start with your biggest bottleneck and expand as you grow.",
    },
  ];

  const ChevronIcon = () => (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
      <path d="M4.5 7L9 11.5L13.5 7" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );

  return (
    <section className="faq section-pad" id="faq">
      <div className="wrap">
        <div className="faq-header reveal">
          <p className="eyebrow">Questions</p>
          <h2 className="section-title">Everything you're<br />wondering</h2>
        </div>
        <div className="faq-list reveal reveal-d1">
          {faqs.map((item, i) => {
            const isOpen = open === i;
            const panelId = `faq-panel-${i}`;
            const btnId = `faq-btn-${i}`;
            return (
              <div key={i} className={`faq-item${isOpen ? ' faq-item--open' : ''}`}>
                <button
                  id={btnId}
                  className="faq-question"
                  aria-expanded={isOpen}
                  aria-controls={panelId}
                  onClick={() => setOpen(isOpen ? -1 : i)}
                >
                  <span className="faq-q-text">{item.q}</span>
                  <span className="faq-q-icon" data-open={isOpen}><ChevronIcon /></span>
                </button>
                <div
                  id={panelId}
                  role="region"
                  aria-labelledby={btnId}
                  className="faq-answer"
                  hidden={!isOpen}
                >
                  <p>{item.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ===== FOOTER ===== */
function ElvaioFooter() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-brand">
          <img src="design-system/assets/logo-clean-light.png" alt="Elvaio" />
        </div>
        <div className="footer-links">
          <span>Automation for online coaches</span>
        </div>
        <div className="footer-meta">
          © 2026 Elvaio. All rights reserved.
        </div>
      </div>
    </footer>
  );
}

window.ProcessSection = ProcessSection;
window.ResultsSection = ResultsSection;
window.TestimonialSection = TestimonialSection;
window.FAQSection = FAQSection;
window.FinalCTA = FinalCTA;
window.ElvaioFooter = ElvaioFooter;