/* global React, ReactDOM */
const { useState, useEffect } = React;

function hexA(hex, a) {
  const h = hex.replace("#","");
  const r = parseInt(h.slice(0,2), 16);
  const g = parseInt(h.slice(2,4), 16);
  const b = parseInt(h.slice(4,6), 16);
  return `rgba(${r},${g},${b},${a})`;
}

const C = {
  navy: "#15131C",
  panel: "#1F1D28",
  orange: "#FF6A1A",
  cream: "#FFF4E8",
  yellow: "#FFC23B",
  ink: "#0A0A12",
  muted: "#9C9AA8",
};

function useIsMobile() {
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    const check = () => setIsMobile(window.innerWidth < 768);
    check();
    window.addEventListener("resize", check);
    return () => window.removeEventListener("resize", check);
  }, []);
  return isMobile;
}

function GlobalStyles() {
  return (
    <style>{`
      @keyframes pulse {
        0%, 100% { transform: scale(1); opacity: 0.7; }
        50% { transform: scale(1.1); opacity: 1; }
      }
      @keyframes orbPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
      }
      @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-12px); }
      }
    `}</style>
  );
}

function Nav() {
  const isMobile = useIsMobile();
  return (
    <nav style={{
      position: "absolute", top: 20, left: 16, right: 16,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      background: hexA("#FFFFFF", 0.06), backdropFilter: "blur(20px)",
      WebkitBackdropFilter: "blur(20px)",
      border: `1px solid ${hexA("#FFFFFF", 0.1)}`,
      borderRadius: 999,
      padding: isMobile ? "8px 8px 8px 16px" : "10px 14px 10px 22px",
      zIndex: 10,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <img src="assets/hoot-logo.png" alt="" style={{ width: isMobile ? 26 : 32, height: isMobile ? 26 : 32, borderRadius: 8 }} />
        <span style={{ fontFamily: "Sora, sans-serif", fontWeight: 800, fontSize: isMobile ? 17 : 22, color: C.cream, letterSpacing: -0.5 }}>Tutorly</span>
      </div>
      {!isMobile && (
        <div style={{ display: "flex", alignItems: "center", gap: 28, color: C.cream }}>
          {["Features", "How it works", "Pricing", "FAQ"].map(l => (
            <a key={l} href={`#${l.toLowerCase().replace(/\s+/g, "-")}`} style={{
              color: C.cream, textDecoration: "none", fontSize: 15, fontWeight: 500, opacity: 0.85,
            }}>{l}</a>
          ))}
        </div>
      )}
      <a href="#download" style={{
        background: C.orange, color: C.ink, textDecoration: "none",
        padding: isMobile ? "8px 14px" : "10px 20px", borderRadius: 999,
        fontFamily: "Sora, sans-serif", fontWeight: 700, fontSize: isMobile ? 12 : 15,
        whiteSpace: "nowrap",
      }}>{isMobile ? "Download" : "Download App →"}</a>
    </nav>
  );
}

function FloatCard({ children, style }) {
  return (
    <div style={{
      position: "absolute",
      background: hexA("#FFFFFF", 0.08),
      backdropFilter: "blur(24px)", WebkitBackdropFilter: "blur(24px)",
      border: `1px solid ${hexA("#FFFFFF", 0.15)}`,
      borderRadius: 24, padding: 18,
      color: C.cream, fontFamily: "Inter, sans-serif",
      boxShadow: "0 30px 60px rgba(0,0,0,0.3)",
      ...style,
    }}>{children}</div>
  );
}

function Orb({ size = 160 }) {
  return (
    <div style={{
      position: "relative", width: size, height: size,
      display: "flex", alignItems: "center", justifyContent: "center",
    }}>
      <div style={{
        position: "absolute", inset: -size * 0.25,
        background: `radial-gradient(circle, ${hexA(C.orange, 0.4)} 0%, transparent 70%)`,
        borderRadius: "50%", animation: "pulse 3s ease-in-out infinite",
      }} />
      <div style={{
        position: "absolute", inset: -size * 0.12,
        background: `radial-gradient(circle, ${hexA(C.orange, 0.5)} 0%, transparent 65%)`,
        borderRadius: "50%", animation: "pulse 3s ease-in-out infinite", animationDelay: "0.5s",
      }} />
      <div style={{
        width: size, height: size, borderRadius: "50%",
        background: `radial-gradient(circle at 35% 30%, #FFB47A 0%, ${C.orange} 40%, #C24A0A 100%)`,
        boxShadow: `inset 0 -20px 40px rgba(0,0,0,0.3), inset 0 20px 40px ${hexA("#FFFFFF", 0.3)}, 0 0 60px ${hexA(C.orange, 0.6)}, 0 0 120px ${hexA(C.orange, 0.4)}`,
        animation: "orbPulse 2.5s ease-in-out infinite",
      }} />
    </div>
  );
}

function PhoneMockup() {
  const isMobile = useIsMobile();
  const phoneW = isMobile ? 240 : 320;
  const phoneH = isMobile ? 500 : 660;
  const orbSize = isMobile ? 120 : 160;

  return (
    <div style={{
      position: "relative", margin: isMobile ? "40px auto 0" : "60px auto 0",
      width: "100%", maxWidth: isMobile ? phoneW + 20 : 1000,
      minHeight: isMobile ? phoneH + 40 : 700,
    }}>
      <div style={{
        position: "relative", margin: "0 auto",
        width: phoneW, height: phoneH,
        borderRadius: isMobile ? 38 : 52, background: C.ink,
        border: `${isMobile ? 8 : 10}px solid ${C.panel}`,
        boxShadow: `0 60px 120px ${hexA(C.orange, 0.3)}, 0 30px 60px rgba(0,0,0,0.5)`,
      }}>
        <div style={{
          position: "absolute", top: 10, left: "50%", transform: "translateX(-50%)",
          width: isMobile ? 70 : 90, height: isMobile ? 22 : 26,
          borderRadius: 999, background: "#000", zIndex: 3,
        }} />
        <div style={{
          position: "absolute", top: 14, left: 22,
          fontSize: 12, fontWeight: 600, color: C.cream, fontFamily: "Inter, sans-serif", zIndex: 4,
        }}>9:41</div>
        <div style={{
          position: "absolute", inset: 6, borderRadius: isMobile ? 32 : 44,
          background: C.ink,
          display: "flex", flexDirection: "column", alignItems: "center",
          paddingTop: isMobile ? 50 : 56, paddingBottom: 20, paddingLeft: 14, paddingRight: 14,
          overflow: "hidden",
        }}>
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%", marginBottom: 14,
          }}>
            <span style={{ fontFamily: "Sora, sans-serif", fontWeight: 800, fontSize: isMobile ? 17 : 20, color: C.cream }}>Tutorly</span>
            <div style={{
              width: 24, height: 24, borderRadius: 999,
              background: hexA(C.cream, 0.1),
              display: "flex", alignItems: "center", justifyContent: "center",
              fontSize: 12, color: C.cream,
            }}>⚙</div>
          </div>
          <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
            <Orb size={orbSize} />
          </div>
          <div style={{
            fontFamily: "Sora, sans-serif", fontWeight: 700, fontSize: isMobile ? 15 : 17, color: C.cream, marginBottom: 10,
          }}>Listening…</div>
          <div style={{
            background: hexA("#3B82F6", 0.15),
            border: `1px solid ${hexA("#3B82F6", 0.3)}`,
            borderRadius: 14,
            padding: "9px 12px",
            fontSize: 11, color: C.cream, textAlign: "center", lineHeight: 1.4,
          }}>Hello! I'm Hoot, your friendly AI tutor. What would you like to explore today?</div>
        </div>
      </div>

      {!isMobile && (
        <>
          <img src="assets/hoot-glow.png" alt="" style={{
            position: "absolute", right: "12%", top: "5%",
            width: 140, height: 140,
            animation: "float 4s ease-in-out infinite", zIndex: 2,
          }} />

          <FloatCard style={{ left: "8%", top: "18%", maxWidth: 220 }}>
            <div style={{ fontSize: 11, opacity: 0.7, marginBottom: 6, color: C.orange, fontWeight: 800, letterSpacing: 1.5 }}>YOU SAID</div>
            <div style={{ fontSize: 14, fontStyle: "italic", marginBottom: 12 }}>"Teach me about the Krebs cycle"</div>
            <svg width="100%" height="20" viewBox="0 0 180 20">
              {[...Array(28)].map((_, i) => {
                const h = 4 + Math.abs(Math.sin(i * 0.6) * 12) + (i % 3) * 2;
                return <rect key={i} x={i * 6.5} y={(20 - h) / 2} width={2.5} height={h} rx={1.25} fill={C.orange} opacity={0.5 + (i % 5) * 0.1} />;
              })}
            </svg>
          </FloatCard>

          <FloatCard style={{ right: "8%", top: "40%", maxWidth: 200 }}>
            <div style={{ fontSize: 11, opacity: 0.7, marginBottom: 4 }}>This week</div>
            <div style={{ fontFamily: "Sora, sans-serif", fontWeight: 800, fontSize: 28, color: C.cream, lineHeight: 1, marginBottom: 4 }}>4h 32m</div>
            <div style={{ fontSize: 12, opacity: 0.7, marginBottom: 12 }}>studying with Hoot</div>
            <div style={{ display: "flex", gap: 4, alignItems: "flex-end", height: 24 }}>
              {[16, 22, 18, 24, 20, 14, 10].map((h, i) => (
                <div key={i} style={{
                  flex: 1, height: h,
                  background: i < 5 ? C.orange : hexA(C.orange, 0.3),
                  borderRadius: 2,
                }} />
              ))}
            </div>
          </FloatCard>

          <div style={{
            position: "absolute", left: "12%", bottom: "18%",
            color: C.cream, fontFamily: "Inter, sans-serif",
          }}>
            <div style={{ fontWeight: 700, fontSize: 14 }}>Tap once.</div>
            <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 8 }}>Hoot's listening.</div>
            <svg width="60" height="30" viewBox="0 0 60 30" style={{ opacity: 0.7 }}>
              <path d="M5 5 Q 20 15, 50 25" stroke={C.orange} strokeWidth="1.5" fill="none" strokeDasharray="3 3" />
              <path d="M45 22 L 50 25 L 47 30" stroke={C.orange} strokeWidth="1.5" fill="none" />
            </svg>
          </div>

          <FloatCard style={{ right: "10%", bottom: "20%", maxWidth: 180, padding: "12px 16px" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <div style={{
                width: 36, height: 36, borderRadius: 8,
                background: C.yellow, color: C.ink,
                display: "flex", alignItems: "center", justifyContent: "center",
                fontFamily: "Sora, sans-serif", fontWeight: 800, fontSize: 14,
              }}>fr</div>
              <div>
                <div style={{ fontWeight: 700, fontSize: 13 }}>French · A2</div>
                <div style={{ fontSize: 11, opacity: 0.7 }}>Conversation prep</div>
              </div>
            </div>
          </FloatCard>
        </>
      )}
    </div>
  );
}

function Hero() {
  const isMobile = useIsMobile();
  return (
    <section style={{
      position: "relative", minHeight: isMobile ? 800 : 1100, overflow: "hidden",
      background: `
        radial-gradient(ellipse 70% 60% at 50% 30%, ${hexA(C.orange, 0.25)} 0%, transparent 60%),
        radial-gradient(ellipse 80% 50% at 80% 80%, ${hexA(C.orange, 0.15)} 0%, transparent 60%),
        radial-gradient(ellipse 80% 50% at 20% 80%, ${hexA("#3B1A47", 0.5)} 0%, transparent 60%),
        ${C.navy}
      `,
      padding: isMobile ? "100px 0 60px" : "140px 0 80px",
      color: C.cream,
    }}>
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: `linear-gradient(${hexA(C.cream, 0.04)} 1px, transparent 1px), linear-gradient(90deg, ${hexA(C.cream, 0.04)} 1px, transparent 1px)`,
        backgroundSize: "60px 60px",
        maskImage: "radial-gradient(ellipse at center, black 40%, transparent 80%)",
        WebkitMaskImage: "radial-gradient(ellipse at center, black 40%, transparent 80%)",
      }} />

      <div style={{
        position: "relative", maxWidth: 1100, margin: "0 auto",
        textAlign: "center", padding: isMobile ? "0 16px" : "0 24px",
      }}>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 12,
          background: hexA("#FFFFFF", 0.06),
          border: `1px solid ${hexA("#FFFFFF", 0.1)}`,
          borderRadius: 999, padding: "8px 16px 8px 8px",
          marginBottom: isMobile ? 24 : 32,
        }}>
          <div style={{
            background: C.orange, color: C.ink, fontWeight: 800, fontSize: 11, letterSpacing: 1,
            padding: "4px 10px", borderRadius: 999, textTransform: "uppercase",
          }}>New</div>
          <span style={{ fontSize: isMobile ? 13 : 14, color: C.cream, opacity: 0.9 }}>Hoot v1 is live · 7 days free</span>
        </div>

        <h1 style={{
          margin: 0,
          fontFamily: "Sora, sans-serif",
          fontWeight: 800,
          fontSize: isMobile ? 44 : 76,
          lineHeight: 1,
          letterSpacing: isMobile ? -1.2 : -2.2,
          color: C.cream,
        }}>
          Your AI tutor,<br/>
          <span style={{ fontStyle: "italic", color: C.orange }}>that talks back.</span>
        </h1>

        <p style={{
          margin: isMobile ? "20px auto 0" : "32px auto 0",
          maxWidth: 620,
          fontSize: isMobile ? 16 : 20,
          lineHeight: 1.5,
          color: C.cream,
          opacity: 0.85,
          padding: isMobile ? "0 8px" : 0,
        }}>
          Meet Hoot — a real-time voice tutor in your pocket. Ask anything. Get instant, patient explanations on any subject. Hands-free.
        </p>

        <div style={{
          marginTop: isMobile ? 28 : 40,
          display: "flex", justifyContent: "center", gap: 12,
          flexWrap: "wrap",
        }}>
          <a href="#how-it-works" style={{
            background: hexA("#FFFFFF", 0.08), color: C.cream, textDecoration: "none",
            padding: isMobile ? "13px 22px" : "16px 28px", borderRadius: 999,
            fontFamily: "Sora, sans-serif", fontWeight: 700, fontSize: isMobile ? 15 : 17,
            border: `1px solid ${hexA("#FFFFFF", 0.15)}`,
          }}>Learn more</a>
          <a href="#download" style={{
            background: C.orange, color: C.ink, textDecoration: "none",
            padding: isMobile ? "13px 22px" : "16px 28px", borderRadius: 999,
            fontFamily: "Sora, sans-serif", fontWeight: 700, fontSize: isMobile ? 15 : 17,
          }}>Download App →</a>
        </div>

        <p style={{
          margin: "16px 0 0",
          fontSize: 13,
          color: C.cream,
          opacity: 0.6,
        }}>7-day free trial · Cancel anytime · iPhone</p>

        <PhoneMockup />
      </div>
    </section>
  );
}

function Features() {
  const isMobile = useIsMobile();
  const features = [
    { title: "Voice-first", blurb: "No typing, no menus. Just talk to Hoot like you'd talk to a friend who happens to know everything.", Visual: VoiceVisual },
    { title: "Hands-free studying", blurb: "Walk, cook, commute — keep learning. Hoot listens automatically and replies with a calm, clear voice.", Visual: HandsFreeVisual },
    { title: "Every subject", blurb: "Maths, history, languages, code, biology, music theory — if it's a subject, Hoot can teach it.", Visual: SubjectsVisual },
  ];
  return (
    <section id="features" style={{
      background: C.navy, color: C.cream, padding: isMobile ? "80px 16px" : "120px 24px",
    }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: isMobile ? 40 : 64 }}>
          <div style={{ fontSize: isMobile ? 12 : 14, fontWeight: 700, letterSpacing: 3, textTransform: "uppercase", color: C.orange, marginBottom: 14 }}>Features</div>
          <h2 style={{
            margin: 0, fontFamily: "Sora, sans-serif", fontWeight: 800,
            fontSize: isMobile ? 36 : 64, lineHeight: 1, letterSpacing: isMobile ? -1 : -2,
          }}>
            A tutor in your pocket,<br/>
            <span style={{ fontStyle: "italic", color: C.orange }}>not in your way.</span>
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 16 : 24 }}>
          {features.map(f => (
            <div key={f.title} style={{
              background: C.panel, borderRadius: 28, padding: isMobile ? 24 : 32,
              border: `1px solid ${hexA(C.cream, 0.06)}`,
            }}>
              <div style={{
                aspectRatio: "1 / 1", borderRadius: 20, overflow: "hidden",
                background: hexA(C.orange, 0.08),
                marginBottom: 24, display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                <f.Visual />
              </div>
              <h3 style={{
                margin: 0, fontFamily: "Sora, sans-serif", fontWeight: 700,
                fontSize: isMobile ? 22 : 26, letterSpacing: -0.5,
              }}>{f.title}</h3>
              <p style={{ margin: "12px 0 0", fontSize: isMobile ? 15 : 16, opacity: 0.75, lineHeight: 1.5 }}>{f.blurb}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function VoiceVisual() {
  return (
    <svg width="80%" viewBox="0 0 200 80">
      {[...Array(40)].map((_, i) => {
        const h = 10 + Math.abs(Math.sin(i * 0.5) * 30) + (i % 7) * 2;
        return <rect key={i} x={i * 5} y={(80 - h) / 2} width={3} height={h} rx={1.5} fill={C.orange} opacity={0.4 + (i % 7) * 0.08} />;
      })}
    </svg>
  );
}

function HandsFreeVisual() {
  return (
    <svg width="80%" viewBox="0 0 200 200">
      <circle cx={100} cy={100} r={80} fill="none" stroke={hexA(C.orange, 0.3)} strokeWidth={2} strokeDasharray="4 8" />
      <circle cx={100} cy={100} r={60} fill="none" stroke={hexA(C.orange, 0.5)} strokeWidth={2} strokeDasharray="4 6" />
      <circle cx={100} cy={100} r={40} fill={C.orange} />
      <path d="M88 88 L88 112 L112 100 Z" fill={C.ink} />
    </svg>
  );
}

function SubjectsVisual() {
  const labels = ["Maths", "Code", "Biology", "Music", "History", "Spanish"];
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 8, justifyContent: "center", alignItems: "center", padding: 16 }}>
      {labels.map((l, i) => (
        <div key={l} style={{
          padding: "8px 14px", borderRadius: 999,
          background: i % 2 ? hexA(C.orange, 0.2) : hexA(C.cream, 0.1),
          color: i % 2 ? C.orange : C.cream,
          fontSize: 13, fontWeight: 600, fontFamily: "Inter, sans-serif",
        }}>{l}</div>
      ))}
    </div>
  );
}

function HowItWorks() {
  const isMobile = useIsMobile();
  const steps = [
    { n: "01", title: "Open Tutorly", blurb: "Tap the app and Hoot wakes up, ready to chat." },
    { n: "02", title: "Speak naturally", blurb: "Ask a question, request a topic, or just say hi. No typing required." },
    { n: "03", title: "Hoot responds", blurb: "A calm, clear voice walks you through it — patient, with examples and follow-ups." },
  ];
  return (
    <section id="how-it-works" style={{
      background: C.navy, color: C.cream, padding: isMobile ? "80px 16px" : "120px 24px",
    }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: isMobile ? 40 : 64 }}>
          <div style={{ fontSize: isMobile ? 12 : 14, fontWeight: 700, letterSpacing: 3, textTransform: "uppercase", color: C.orange, marginBottom: 14 }}>How it works</div>
          <h2 style={{
            margin: 0, fontFamily: "Sora, sans-serif", fontWeight: 800,
            fontSize: isMobile ? 36 : 64, lineHeight: 1, letterSpacing: isMobile ? -1 : -2,
          }}>
            Three steps to<br/>
            <span style={{ fontStyle: "italic", color: C.orange }}>better grades.</span>
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 28 : 32 }}>
          {steps.map(s => (
            <div key={s.n}>
              <div style={{
                fontFamily: "Sora, sans-serif", fontWeight: 800,
                fontSize: isMobile ? 48 : 64, letterSpacing: -2,
                color: C.orange, lineHeight: 1, marginBottom: 12,
              }}>{s.n}</div>
              <h3 style={{
                margin: 0, fontFamily: "Sora, sans-serif", fontWeight: 700,
                fontSize: isMobile ? 22 : 28, letterSpacing: -1,
              }}>{s.title}</h3>
              <p style={{ margin: "12px 0 0", fontSize: isMobile ? 15 : 17, opacity: 0.75, lineHeight: 1.5 }}>{s.blurb}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const isMobile = useIsMobile();
  return (
    <section id="pricing" style={{
      background: C.navy, color: C.cream, padding: isMobile ? "80px 16px" : "120px 24px",
    }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: isMobile ? 40 : 64 }}>
          <div style={{ fontSize: isMobile ? 12 : 14, fontWeight: 700, letterSpacing: 3, textTransform: "uppercase", color: C.orange, marginBottom: 14 }}>Pricing</div>
          <h2 style={{
            margin: 0, fontFamily: "Sora, sans-serif", fontWeight: 800,
            fontSize: isMobile ? 36 : 64, lineHeight: 1, letterSpacing: isMobile ? -1 : -2,
          }}>
            A real tutor,<br/>
            <span style={{ fontStyle: "italic", color: C.orange }}>a fraction of the price.</span>
          </h2>
        </div>
        <div style={{ position: "relative", maxWidth: 820, margin: "0 auto" }}>
          {!isMobile && (
            <img src="assets/hoot-glow.png" alt="" style={{
              position: "absolute", right: -90, top: -60, width: 160, height: 160,
              transform: "rotate(12deg)", zIndex: 2,
              filter: `drop-shadow(0 20px 40px ${hexA(C.orange, 0.4)})`,
            }} />
          )}
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 16 : 20 }}>
            {[
              { title: "Monthly", price: "£7.99", per: "/ month", bullets: ["Unlimited conversations", "Any subject, any level", "Cancel anytime"], highlight: false },
              { title: "Yearly", price: "£59.99", per: "/ year", bullets: ["Everything in Monthly", "Save 38% (£35.89/yr)", "Best value"], highlight: true, badge: "Best value" },
            ].map(p => (
              <div key={p.title} style={{
                background: p.highlight ? C.orange : C.panel,
                color: p.highlight ? C.ink : C.cream,
                borderRadius: 28, padding: isMobile ? 28 : 36, position: "relative",
                border: p.highlight ? "none" : `1px solid ${hexA(C.cream, 0.08)}`,
              }}>
                {p.badge && (
                  <div style={{
                    position: "absolute", top: 20, right: 20,
                    background: C.ink, color: C.cream,
                    padding: "6px 14px", borderRadius: 999,
                    fontSize: 11, fontWeight: 800, letterSpacing: 1, textTransform: "uppercase",
                  }}>{p.badge}</div>
                )}
                <div style={{ fontFamily: "Sora, sans-serif", fontWeight: 700, fontSize: 22, opacity: 0.7 }}>{p.title}</div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 12 }}>
                  <div style={{ fontFamily: "Sora, sans-serif", fontWeight: 800, fontSize: isMobile ? 60 : 80, lineHeight: 1, letterSpacing: -3 }}>{p.price}</div>
                  <div style={{ fontSize: 18, opacity: 0.7 }}>{p.per}</div>
                </div>
                <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 10 }}>
                  {p.bullets.map(b => (
                    <div key={b} style={{ fontSize: 16, display: "flex", gap: 10 }}>
                      <span style={{ fontWeight: 800 }}>+</span>
                      <span>{b}</span>
                    </div>
                  ))}
                </div>
                <a href="#download" style={{
                  display: "block", marginTop: 24, padding: "13px 20px", borderRadius: 999, textAlign: "center",
                  background: p.highlight ? C.ink : C.orange,
                  color: p.highlight ? C.cream : C.ink,
                  fontFamily: "Sora, sans-serif", fontWeight: 700, fontSize: 16, textDecoration: "none",
                }}>Get Tutorly</a>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const isMobile = useIsMobile();
  const items = [
    { q: "What devices does Tutorly work on?", a: "Tutorly is available on iPhone via the App Store. Android coming soon." },
    { q: "Do I need an internet connection?", a: "Yes — Hoot streams its voice in real time, so a stable connection is needed." },
    { q: "Is my voice data stored?", a: "No. Voice is processed in real time and not retained on our servers." },
    { q: "How do I cancel?", a: "Any time, from your iPhone Settings → Apple ID → Subscriptions. Your access continues until the end of the period." },
    { q: "What subjects can Hoot teach?", a: "Anything you'd reasonably ask a tutor — maths, sciences, languages, history, programming, music theory, exam prep, and more." },
    { q: "What's the free trial?", a: "7 days free with up to 3 sessions per day, 5 minutes each. Subscribe to Pro for longer, more frequent sessions." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" style={{
      background: C.navy, color: C.cream, padding: isMobile ? "80px 16px" : "120px 24px",
    }}>
      <div style={{ maxWidth: 800, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: isMobile ? 40 : 64 }}>
          <div style={{ fontSize: isMobile ? 12 : 14, fontWeight: 700, letterSpacing: 3, textTransform: "uppercase", color: C.orange, marginBottom: 14 }}>FAQ</div>
          <h2 style={{
            margin: 0, fontFamily: "Sora, sans-serif", fontWeight: 800,
            fontSize: isMobile ? 36 : 64, lineHeight: 1, letterSpacing: isMobile ? -1 : -2,
          }}>
            Questions,<br/>
            <span style={{ fontStyle: "italic", color: C.orange }}>answered.</span>
          </h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {items.map((it, i) => (
            <div key={i} style={{
              background: C.panel, borderRadius: 20, padding: isMobile ? 18 : 24,
              border: `1px solid ${hexA(C.cream, 0.06)}`, cursor: "pointer",
            }} onClick={() => setOpen(open === i ? -1 : i)}>
              <div style={{
                display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12,
                fontFamily: "Sora, sans-serif", fontWeight: 700,
                fontSize: isMobile ? 15 : 18,
              }}>
                {it.q}
                <span style={{ color: C.orange, fontSize: 22, fontWeight: 800, flexShrink: 0 }}>{open === i ? "−" : "+"}</span>
              </div>
              {open === i && (
                <div style={{ marginTop: 14, fontSize: isMobile ? 14 : 16, opacity: 0.8, lineHeight: 1.5 }}>{it.a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AppStoreBadge() {
  return (
    <a href="#" style={{ display: "inline-block", textDecoration: "none" }}>
      <div style={{
        display: "inline-flex", alignItems: "center", gap: 12,
        background: C.cream, color: C.ink,
        padding: "12px 22px", borderRadius: 14,
        fontFamily: "-apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif",
        boxShadow: "0 8px 24px rgba(0,0,0,0.3)",
      }}>
        <svg width="28" height="28" viewBox="0 0 24 24" fill={C.ink}>
          <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
        </svg>
        <div>
          <div style={{ fontSize: 10, opacity: 0.7, lineHeight: 1.2 }}>Download on the</div>
          <div style={{ fontSize: 18, fontWeight: 600, lineHeight: 1.2 }}>App Store</div>
        </div>
      </div>
    </a>
  );
}

function FinalCTA() {
  const isMobile = useIsMobile();
  return (
    <section id="download" style={{
      background: C.navy, color: C.cream, padding: isMobile ? "80px 16px" : "120px 24px",
    }}>
      <div style={{
        position: "relative", maxWidth: 1100, margin: "0 auto",
        background: `radial-gradient(ellipse at center, ${hexA(C.orange, 0.5)} 0%, ${C.panel} 70%)`,
        borderRadius: 40, padding: isMobile ? "60px 24px" : 80, textAlign: "center",
        border: `1px solid ${hexA(C.cream, 0.08)}`, overflow: "hidden",
      }}>
        <img src="assets/hoot-glow.png" alt="" style={{
          width: isMobile ? 120 : 180, height: isMobile ? 120 : 180, marginBottom: 16,
        }} />
        <h2 style={{
          margin: 0, fontFamily: "Sora, sans-serif", fontWeight: 800,
          fontSize: isMobile ? 44 : 80, lineHeight: 1, letterSpacing: isMobile ? -1.5 : -3,
        }}>
          Just <span style={{ fontStyle: "italic", color: C.orange }}>ask.</span>
        </h2>
        <p style={{
          margin: isMobile ? "20px auto 0" : "24px auto 0", maxWidth: 560,
          fontSize: isMobile ? 16 : 19, lineHeight: 1.5, opacity: 0.85,
        }}>
          Tutorly is free to download. Try it now on iOS.
        </p>
        <div style={{ marginTop: isMobile ? 24 : 32 }}>
          <AppStoreBadge />
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const isMobile = useIsMobile();
  return (
    <footer style={{
      background: C.ink, color: C.cream, padding: isMobile ? "32px 16px" : "48px 24px", textAlign: "center",
      borderTop: `1px solid ${hexA(C.cream, 0.06)}`,
    }}>
      <div style={{
        display: "inline-flex", alignItems: "center", gap: 10, marginBottom: 14,
      }}>
        <img src="assets/hoot-logo.png" alt="" style={{ width: 24, height: 24, borderRadius: 6 }} />
        <span style={{ fontFamily: "Sora, sans-serif", fontWeight: 800, fontSize: 18, color: C.cream }}>Tutorly</span>
      </div>
      <div style={{ fontSize: 13, opacity: 0.6, marginBottom: 12 }}>© 2026 Tutorly. Hoot loves you.</div>
      <div style={{ display: "flex", justifyContent: "center", gap: 20, fontSize: 13, opacity: 0.5 }}>
        <a href="/privacy" style={{ color: C.cream, textDecoration: "none" }}>Privacy</a>
        <a href="/terms" style={{ color: C.cream, textDecoration: "none" }}>Terms</a>
        <a href="mailto:tutorlyAI_app@outlook.com" style={{ color: C.cream, textDecoration: "none" }}>Support</a>
      </div>
    </footer>
  );
}

function App() {
  return (
    <div>
      <GlobalStyles />
      <Nav />
      <Hero />
      <Features />
      <HowItWorks />
      <Pricing />
      <FAQ />
      <FinalCTA />
      <Footer />
    </div>
  );
}

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