/* global React, useRoute, useToast, Placeholder, I, CLIENTS, PRESS */
const { useState } = React;

function About() {
  return (
    <main className="fade">
      {/* Hero */}
      <section style={{ padding: "96px 0 56px" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "end" }}>
          <div>
            <span className="eyebrow eyebrow-gold">§ Studio · MMXXVI</span>
            <h1 className="serif balance" style={{ fontSize: "clamp(56px, 7.6vw, 124px)", lineHeight: 0.94, margin: "16px 0 0" }}>
              A studio of <em style={{ fontStyle: "italic", color: "var(--gold-soft)" }}>eleven</em>,<br/>
              shooting on the <em style={{ fontStyle: "italic", color: "var(--gold-soft)" }}>11th</em>.
            </h1>
          </div>
          <p className="pretty" style={{ color: "var(--text-1)", fontSize: 16.5, lineHeight: 1.7 }}>
            Founded in 2021 by Simeon Reid. The studio works across image, sound, and code, remote-first, with a trusted bench of crew who scale up per shoot.
            We read every brief by hand and write back inside a working day.
          </p>
        </div>
      </section>

      {/* Manifesto — single column, centered */}
      <section className="section">
        <div className="container" style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
          <span className="eyebrow eyebrow-gold">§ Practice</span>
          <div style={{ marginTop: 18, textAlign: "left" }}>
              <p className="serif balance" style={{ fontSize: "clamp(26px, 2.8vw, 38px)", lineHeight: 1.25, fontWeight: 300, margin: 0 }}>
                We don't take pitches, and we won't quote on the first call. The studio works in person, with the lights low and the door closed. Founded in 2021. We answer every email by hand, and we send work back when it doesn't earn the room.
              </p>
              <hr className="rule-gold" style={{ margin: "48px 0", maxWidth: 80 }} />
              <p className="pretty" style={{ color: "var(--text-1)", fontSize: 16, lineHeight: 1.75, maxWidth: 700 }}>
                Eleven Views is a one-person studio, founded and run by Simeon Reid. The studio works distributed and travels for the shoot, quietly building image, film, and recap work that earns a second look.
                Right now, the studio's focus is birthday-party films: full recaps booked months in advance with deposit, captured on the day, edited into a film the family keeps.
              </p>
            </div>
          </div>
      </section>

      {/* Numbers strip */}
      <section style={{ padding: "60px 0", background: "#080808", borderTop: "1px solid var(--border-1)", borderBottom: "1px solid var(--border-1)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
            {[
              ["01", "Founder · operator"],
              ["Remote", "Distributed studio"],
              ["Recap", "Birthday-party films"],
            ].map(([n, l]) => (
              <div key={l} style={{ borderLeft: "1px solid var(--border)", paddingLeft: 20 }}>
                <div className="serif" style={{ fontSize: 56, color: "var(--gold)", lineHeight: 1, fontStyle: "italic" }}>{n}</div>
                <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-2)", marginTop: 10 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="section">
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 36 }}>
            <div>
              <span className="eyebrow eyebrow-gold">§ The studio</span>
              <h2 className="serif" style={{ fontSize: "clamp(36px, 4.2vw, 56px)", lineHeight: 1.02, margin: "12px 0 0" }}>
                Who carries the work.
              </h2>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "minmax(260px, 360px) 1fr", gap: 48, alignItems: "center" }}>
            {[
              ["Simeon Reid", "Founder · Director · Camera", "warm"],
            ].map(([name, role, v], i) => (
              <div key={name} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                <div className="ph warm" style={{
                  aspectRatio: "4/5",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  background: "linear-gradient(180deg, #1c1610 0%, #0d0a07 100%)",
                  border: "1px solid var(--border)",
                  position: "relative",
                }}>
                  <span className="serif" style={{
                    fontFamily: "var(--serif)", fontStyle: "italic", fontWeight: 300,
                    fontSize: "clamp(56px, 8vw, 96px)",
                    color: "var(--gold)", lineHeight: 1, letterSpacing: "-0.02em",
                  }}>SR</span>
                  <span className="ph-corner">EV-P{String(i + 1).padStart(2, "0")}</span>
                </div>
                <div>
                  <div className="serif" style={{ fontSize: 22 }}>{name}</div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-3)", marginTop: 4 }}>{role}</div>
                </div>
              </div>
            ))}
            <p className="pretty" style={{ color: "var(--text-1)", fontSize: 16, lineHeight: 1.7, maxWidth: 540 }}>
              Eleven Views is intentionally small, one operator, one set of standards. Crews scale up per shoot from a trusted bench of camera, sound, and edit collaborators, then scale back down when the film delivers. Nothing on the site is delegated; nothing on the shoot is outsourced.
            </p>
          </div>
        </div>
      </section>

    </main>
  );
}

function Contact() {
  const toast = useToast();
  const [sent, setSent] = useState(false);
  return (
    <main className="fade">
      <section style={{ padding: "80px 0 24px" }}>
        <div className="container">
          <span className="eyebrow eyebrow-gold">§ Contact</span>
          <h1 className="serif balance" style={{ fontSize: "clamp(56px, 7vw, 112px)", lineHeight: 0.94, margin: "12px 0 0" }}>
            <em style={{ fontStyle: "italic", color: "var(--gold-soft)" }}>Write</em> the studio.
          </h1>
        </div>
      </section>

      <section style={{ padding: "48px 0 96px" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
          <div>
            {sent ? (
              <div style={{ padding: "60px 0" }}>
                <I name="check" size={32} stroke="var(--gold)" style={{ marginBottom: 20 }} />
                <h2 className="serif" style={{ fontSize: 36, margin: "0 0 14px" }}>Sent. Eleven thanks.</h2>
                <p className="pretty" style={{ color: "var(--text-1)", fontSize: 15, lineHeight: 1.7, maxWidth: 460 }}>
                  We'll write back within a working day. If it's about commissions, we may also share a short PDF of recent work and rates.
                </p>
                <button className="btn btn-line" style={{ marginTop: 24 }} onClick={() => setSent(false)}>Write another</button>
              </div>
            ) : (
              <div style={{ display: "grid", gap: 18 }}>
                <div className="field-row"><label className="label">Your name</label><input className="input" /></div>
                <div className="field-row"><label className="label">Email</label><input className="input" type="email" /></div>
                <div className="field-row">
                  <label className="label">What's it about?</label>
                  <select className="input" defaultValue="Commission">
                    <option>Commission</option>
                    <option>Press</option>
                    <option>Studio rental</option>
                    <option>Music licensing</option>
                    <option>Just saying hello</option>
                  </select>
                </div>
                <div className="field-row"><label className="label">Message</label><textarea className="ta" rows={6} /></div>
                <button className="btn btn-gold btn-lg" onClick={() => { setSent(true); toast("Message sent."); }}>Send message <I name="send" size={16} /></button>
              </div>
            )}
          </div>
          <div>
            <div className="serif-it" style={{ fontSize: 28, color: "var(--text-1)", lineHeight: 1.4, marginBottom: 36, maxWidth: 460 }}>
              "The work begins with a conversation. The form is just there to set up the conversation."
            </div>

            <div style={{ display: "grid", gap: 28, maxWidth: 380 }}>
              {[
                ["mail", "Support", "support@elevenviews.io"],
                ["mail", "Press", "press@elevenviews.io"],
                ["pin", "Studio", "Remote · we travel for the shoot"],
              ].map(([icon, label, value]) => (
                <div key={label} style={{ display: "grid", gridTemplateColumns: "32px 1fr", gap: 14 }}>
                  <div style={{ width: 32, height: 32, border: "1px solid var(--gold)", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <I name={icon} size={14} stroke="var(--gold)" />
                  </div>
                  <div>
                    <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-2)", marginBottom: 6 }}>{label}</div>
                    <div style={{ fontSize: 14, color: "var(--text-1)", lineHeight: 1.6, whiteSpace: "pre-line" }}>{value}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

    </main>
  );
}

function Login() {
  const { goto } = useRoute();
  const toast = useToast();
  const [mode, setMode] = useState("signin"); // signin | signup
  return (
    <main className="fade" style={{ minHeight: "calc(100vh - var(--hdr))" }}>
      <section style={{ display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: "calc(100vh - var(--hdr))" }}>
        {/* Left, visual */}
        <div style={{ position: "relative", overflow: "hidden", borderRight: "1px solid var(--border-1)" }}>
          <Placeholder label="hudson valley · march" variant="warm" code="EV-LG-01" style={{ width: "100%", height: "100%", border: 0 }} />
          <div className="hero-vignette" />
          <div style={{ position: "absolute", inset: 0, padding: "48px 56px", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--gold)" }}>
              ⌘ · Account portal
            </div>
            <div>
              <p className="serif balance" style={{ fontSize: 36, lineHeight: 1.15, fontStyle: "italic", margin: 0, maxWidth: 420 }}>
                One studio. One operator. One film the family keeps.
              </p>
              <p className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-2)", marginTop: 24 }}>
                — Eleven Views · A remote studio
              </p>
            </div>
          </div>
        </div>

        {/* Right, form */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "48px 56px" }}>
          <div style={{ width: "100%", maxWidth: 440 }}>
            <span className="eyebrow eyebrow-gold">§ {mode === "signin" ? "Sign in" : "Create account"}</span>
            <h1 className="serif" style={{ fontSize: 44, lineHeight: 1.05, margin: "12px 0 6px" }}>
              {mode === "signin" ? "Welcome back." : "Make a studio account."}
            </h1>
            <p style={{ color: "var(--text-2)", fontSize: 14, marginBottom: 28 }}>
              {mode === "signin" ? "Pick up your bag, your orders, your in-flight inquiries." : "We'll save your bag and your inquiries, and send you the rare studio dispatch."}
            </p>

            <div style={{ display: "grid", gap: 10, marginBottom: 18 }}>
              <button className="btn btn-ghost btn-lg" style={{ width: "100%" }}>
                <I name="google" size={16} /> Continue with Google
              </button>
              <button className="btn btn-ghost btn-lg" style={{ width: "100%" }}>
                <I name="apple" size={16} /> Continue with Apple
              </button>
            </div>

            <div style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--text-3)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", margin: "20px 0" }}>
              <hr className="rule" style={{ flex: 1 }} /> or with email <hr className="rule" style={{ flex: 1 }} />
            </div>

            <div style={{ display: "grid", gap: 14 }}>
              {mode === "signup" && (
                <div className="field-row"><label className="label">Full name</label><input className="input" placeholder="Avery Park" /></div>
              )}
              <div className="field-row"><label className="label">Email</label><input className="input" type="email" placeholder="you@studio.example" /></div>
              <div className="field-row"><label className="label">Password</label><input className="input" type="password" placeholder="••••••••" /></div>
              {mode === "signin" && (
                <a className="lk" style={{ alignSelf: "end", fontSize: 12 }}>Forgot password?</a>
              )}
              <button className="btn btn-gold btn-lg" style={{ marginTop: 6 }} onClick={() => { toast(mode === "signin" ? "Signed in." : "Account created."); goto("home"); }}>
                {mode === "signin" ? "Sign in" : "Create account"} <I name="arrow" size={16} />
              </button>
            </div>

            <p style={{ fontSize: 13, color: "var(--text-2)", marginTop: 28, textAlign: "center" }}>
              {mode === "signin" ? (
                <>New to the studio? <a className="lk" onClick={() => setMode("signup")} style={{ cursor: "pointer" }}>Create an account</a></>
              ) : (
                <>Already have one? <a className="lk" onClick={() => setMode("signin")} style={{ cursor: "pointer" }}>Sign in</a></>
              )}
            </p>
          </div>
        </div>
      </section>
    </main>
  );
}

window.About = About;
window.Contact = Contact;
window.Login = Login;