// Brands page
const BrandsPage = () => {
  const diffs = [
    { t: "Curated storyteller network", d: "Hand-picked, certified, badge-verified travelers who create for living — not for brand deals." },
    { t: "Authentic storytelling", d: "Mutual ratings and reviews. Creators work with properties they genuinely love." },
    { t: "360° immersive content", d: "Photography, film, drone, underwater, and 360-video capabilities built into the platform." },
    { t: "Full-service marketing", d: "White-glove, end-to-end campaign production by our award-winning in-house film team." },
    { t: "Lower acquisition cost", d: "Pay only on completed bookings. No CPM. No upfront fees. Direct reservation attribution." },
    { t: "Data & insights", d: "Which creators convert, what travelers want, how audiences discover your property." },
  ];
  const partners = ["Giraffe Manor", "Aman Resorts", "Il San Pietro di Positano", "Casa Angelina", "7132 Hotel", "Altar Tulum"];
  const [form, setForm] = React.useState({
    property: "", contact: "", title: "", email: "", website: "", count: "",
    looking: [], message: "",
  });
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState("");
  const upd = (k) => (e) => setForm({...form, [k]: e.target.value});
  const toggle = (v) => () => {
    setForm(f => ({...f, looking: f.looking.includes(v) ? f.looking.filter(x=>x!==v) : [...f.looking, v]}));
  };
  const submit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setSubmitting(true);
    setError("");
    try {
      const r = await fetch("/api/forms/brand", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          propertyName: form.property,
          contactName: form.contact,
          email: form.email,
          phone: "",
          region: form.title,
          propertyType: form.count,
          message: [
            form.website ? `Website: ${form.website}` : "",
            form.looking.length ? `Looking for: ${form.looking.join(", ")}` : "",
            form.message,
          ].filter(Boolean).join("\n\n"),
          website: form.website,
          count: form.count,
          looking: form.looking,
        }),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok || !data.ok) {
        setError("Something went wrong. Please try again.");
        setSubmitting(false);
        return;
      }
      const firstName = data.firstName || (form.contact || "").trim().split(/\s+/)[0] || "Friend";
      window.__thanks = { kind: "brand", firstName, email: form.email, property: form.property };
      window.__setRoute && window.__setRoute("thanks");
    } catch (err) {
      setError("Network error. Please try again.");
      setSubmitting(false);
    }
  };

  return (
    <main>
      <section className="page-hero brands" data-screen-label="Brands · Hero">
        <div className="grid-lines">
          <span style={{left:"25%"}}/><span style={{left:"50%"}}/><span style={{left:"75%"}}/>
        </div>
        <div className="page-hero-inner">
          <div>
            <div className="eyebrow reveal">For Hotels & Brands</div>
            <h1 className="display reveal">Distribution through <em>authentic storytelling.</em></h1>
          </div>
          <div className="reveal">
            <p className="lede">Connect your property with a curated network of certified travel storytellers who create immersive, bookable content that drives direct reservations.</p>
            <a href="#inquire" className="btn on-dark lg" onClick={(e)=>{e.preventDefault();document.querySelector("#inquire")?.scrollIntoView({behavior:"smooth",block:"start"});}}>
              Inquire About Partnership <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </section>

      <section className="section" data-screen-label="Brands · What">
        <div className="container">
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"clamp(40px,7vw,120px)",alignItems:"center"}} className="reveal">
            <div>
              <div className="eyebrow" style={{marginBottom: 20}}>What Trepic Does for Brands</div>
              <h2 className="h2" style={{marginBottom: 28}}>The complex business of influencer marketing — <em>simplified</em>.</h2>
              <p className="body-lg" style={{maxWidth: 480, marginBottom: 20}}>We simplify the complex process of working with influencers — shortening the time to quality content while maximizing reach and conversion.</p>
              <p className="body-lg" style={{maxWidth: 480}}>Our creators are verified, our attribution is direct, and our content is built for the way travelers actually discover places today.</p>
            </div>
            <div className="offset-frame">
              <img src={IMG.brands} alt=""/>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{background:"var(--c-off)",paddingTop:0}}>
        <div className="container">
          <div className="col-grid-2 reveal">
            {diffs.map((d,i) => (
              <div key={i} className="col-card">
                <div className="tier-sub">0{i+1}</div>
                <div className="tier-name">{d.t}</div>
                <p>{d.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{padding:"0 var(--gutter)"}}>
        <div className="container" style={{padding:0}}>
          <div className="brand-row reveal">
            <span className="label">Trusted by</span>
            {partners.map((p,i) => (
              <React.Fragment key={p}>
                <span className="name">{p}</span>
                {i < partners.length - 1 ? <span style={{color:"var(--c-mute)"}}>·</span> : null}
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow" style={{marginBottom: 20}}>Service Options</div>
              <h2 className="h2">Two tiers of <em>partnership</em>.</h2>
            </div>
          </div>
          <div className="col-grid-2 reveal">
            <div className="col-card">
              <div className="tier-sub">Option 01</div>
              <div className="tier-name">Influencer Marketing Management</div>
              <p>We match you with the perfect storyteller for your brand — vetted, briefed, and paid only on results.</p>
            </div>
            <div className="col-card">
              <div className="tier-sub">Option 02</div>
              <div className="tier-name">Full Marketing Service</div>
              <p>White-glove, end-to-end campaign execution. Our film team flies to your property and produces the definitive visual asset.</p>
            </div>
          </div>
          <p className="body" style={{textAlign:"center",marginTop:48,letterSpacing:"0.04em",fontStyle:"italic",fontFamily:"var(--ff-display)",fontSize:20}}>Details shared privately with approved partners.</p>
        </div>
      </section>

      <section id="inquire" className="section section-light-cta" data-screen-label="Brands · Inquire">
        <div className="container">
          <div style={{display:"grid",gridTemplateColumns:"1fr 1.4fr",gap:"80px",alignItems:"start"}} className="reveal">
            <div>
              <div className="eyebrow on-dark" style={{marginBottom: 20}}>Partnership Inquiry</div>
              <h2 className="h2" style={{marginBottom: 28, color: "#fff"}}>A private <em>conversation</em>.</h2>
              <p className="body-lg on-dark" style={{maxWidth: 380, marginBottom: 40}}>Our partnerships team will respond within three business days. Commercial terms are customized to your property and discussed privately.</p>
              <div style={{paddingTop: 32, borderTop: "1px solid rgba(255,255,255,0.12)"}}>
                <div className="eyebrow on-dark" style={{marginBottom: 16}}>Partnerships Team</div>
                <p className="body" style={{color: "rgba(255,255,255,0.7)", fontSize: 14, maxWidth: 300}}>partners@trepic.co<br/>London · New York · Milan</p>
              </div>
            </div>
            {sent ? (
              <div style={{border:"1px solid rgba(255,255,255,0.2)",padding:"60px 48px",textAlign:"center"}}>
                <div className="eyebrow on-dark">Inquiry Received</div>
                <div style={{fontFamily:"var(--ff-display)",fontSize:"clamp(28px,3vw,44px)",lineHeight:1.2,margin:"24px 0",fontStyle:"italic",color:"#fff"}}>
                  Thank you, {form.contact || "partner"}.
                </div>
                <p style={{color:"rgba(255,255,255,0.7)",maxWidth:420,margin:"0 auto"}}>Our partnerships team will respond to {form.email || "you"} within three business days.</p>
              </div>
            ) : (
              <form onSubmit={submit}>
                <div className="form-row">
                  <div className="field dark"><label>Property / Brand Name</label><input required value={form.property} onChange={upd("property")}/></div>
                  <div className="field dark"><label>Contact Name</label><input required value={form.contact} onChange={upd("contact")}/></div>
                </div>
                <div className="form-row">
                  <div className="field dark"><label>Title</label><input value={form.title} onChange={upd("title")}/></div>
                  <div className="field dark"><label>Email</label><input required type="email" value={form.email} onChange={upd("email")}/></div>
                </div>
                <div className="form-row">
                  <div className="field dark"><label>Property Website</label><input value={form.website} onChange={upd("website")} placeholder="https://"/></div>
                  <div className="field dark">
                    <label>Number of Properties</label>
                    <select required value={form.count} onChange={upd("count")} style={{color:"#fff",background:"transparent"}}>
                      <option value="" style={{color:"#000"}}>— Select —</option>
                      <option style={{color:"#000"}}>1</option>
                      <option style={{color:"#000"}}>2–5</option>
                      <option style={{color:"#000"}}>6–20</option>
                      <option style={{color:"#000"}}>21–100</option>
                      <option style={{color:"#000"}}>100+</option>
                    </select>
                  </div>
                </div>
                <div className="field dark">
                  <label>What are you looking for?</label>
                  <div className="checkgroup">
                    {["Influencer Matching","Content Production","Full Marketing Service","Booking Distribution","Other"].map(o => (
                      <label key={o} className={"checkopt" + (form.looking.includes(o) ? " on" : "")} onClick={toggle(o)}>
                        <div className="dot"/>{o}
                      </label>
                    ))}
                  </div>
                </div>
                <div className="field dark">
                  <label>Message</label>
                  <textarea rows="4" value={form.message} onChange={upd("message")}/>
                </div>
                <button type="submit" disabled={submitting} className="btn on-dark lg" style={{marginTop: 16, opacity: submitting ? 0.6 : 1}}>
                  {submitting ? "Sending…" : <>Submit Inquiry <span className="arrow">→</span></>}
                </button>
                {error ? <p style={{color:"#ffb1b1",fontSize:13,marginTop:12}}>{error}</p> : null}
              </form>
            )}
          </div>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { BrandsPage });