1import { useEffect, useRef } from "react";2import { useTranslations } from "next-intl";3import { Container } from "@/components/Container";4import { Button } from "@/components/Button";5 6// buildbyalex — hero scroll-morph. idea to release, end to end.7export function Hero() {8  const t = useTranslations("home.hero");9  const sectionRef = useRef(null);10  const frameRef = useRef(null);11  const contentRef = useRef(null);12 13  useEffect(() => {14    const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;15    let currentP = 0;16    let targetP = 0;17 18    const computeTarget = () => {19      const rect = sectionRef.current.getBoundingClientRect();20      const zone = Math.max(1, rect.height - innerHeight);21      const raw = reduced ? 0 : Math.min(1, Math.max(0, -rect.top / zone));22      targetP = raw * raw * (3 - 2 * raw);23    };24 25    const apply = (p) => {26      const frame = frameRef.current;27      const content = contentRef.current;28      const maxX = Math.min(160, innerWidth * 0.08);29      frame.style.top = p * 80 + "px";30      frame.style.left = p * maxX + "px";31      frame.style.right = p * maxX + "px";32      frame.style.bottom = p * 120 + "px";33      frame.style.borderRadius = p * 28 + "px";34      content.style.transform = "scale(" + (1 - p * 0.18) + ")";35      content.style.opacity = 1 - p * 0.25;36    };37 38    // spring toward target even if the user scroll-blasts past39    const tick = () => {40      computeTarget();41      const diff = targetP - currentP;42      if (Math.abs(diff) < 0.0008) return apply(currentP);43      currentP += diff * 0.12;44      apply(currentP);45      requestAnimationFrame(tick);46    };47 48    addEventListener("scroll", () => requestAnimationFrame(tick));49    return () => removeEventListener("scroll", tick);50  }, []);51 52  return (53    <section ref={sectionRef} className="hero-scroll">54      <div className="hero-sticky">55        <div ref={frameRef} className="hero-frame">56          <HeroCodeSurface />57          <div className="hero-flashlight" />58          <div className="hero-chrome">buildbyalex.com</div>59        </div>60        <div ref={contentRef} className="hero-content">61          <Container size="default">62            <h1 className="t-hero">63              Сайты, AI-агенты64              и мобильные приложения.65              <span className="hl-accent">Под ключ за 1–3 недели.</span>66            </h1>67            <p className="hero-sub">{t("subhead")}</p>68            <Button href="/contact" size="lg">69              {t("primaryCta")}70            </Button>71          </Container>72        </div>73      </div>74    </section>75  );76  // ● Live · Worldwide — shipped, not staged77}78 79// app/api/contact/route.ts — leads land in Telegram instantly80import { NextRequest, NextResponse } from "next/server";81 82const TOKEN = process.env.TELEGRAM_BOT_TOKEN;83const CHAT = process.env.TELEGRAM_CHAT_ID;84 85export async function POST(req: NextRequest) {86  const { name, email, message } = await req.json();87 88  if (!name || !email) {89    return NextResponse.json({ error: "missing fields" }, { status: 400 });90  }91 92  const text = [93    "🟠 Новая заявка — buildbyalex",94    "Имя: " + name,95    "Email: " + email,96    "",97    message,98  ].join("99");100 101  await fetch("https://api.telegram.org/bot" + TOKEN + "/sendMessage", {102    method: "POST",103    headers: { "content-type": "application/json" },104    body: JSON.stringify({ chat_id: CHAT, text, parse_mode: "HTML" }),105  });106 107  return NextResponse.json({ ok: true });108}109 110// brand tokens — warm amber on near-black ink111export const theme = {112  accent: "#FF6B1A",113  accentHover: "#FF7C36",114  ink: "#050507",115  radius: { card: 28, pill: 999 },116  ship: "1–3 недели",117};118 119export function clamp(min, val, max) {120  return Math.max(min, Math.min(val, max));121}122import { useEffect, useRef } from "react";123import { useTranslations } from "next-intl";124import { Container } from "@/components/Container";125import { Button } from "@/components/Button";126 127// buildbyalex — hero scroll-morph. idea to release, end to end.128export function Hero() {129  const t = useTranslations("home.hero");130  const sectionRef = useRef(null);131  const frameRef = useRef(null);132  const contentRef = useRef(null);133 134  useEffect(() => {135    const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;136    let currentP = 0;137    let targetP = 0;138 139    const computeTarget = () => {140      const rect = sectionRef.current.getBoundingClientRect();141      const zone = Math.max(1, rect.height - innerHeight);142      const raw = reduced ? 0 : Math.min(1, Math.max(0, -rect.top / zone));143      targetP = raw * raw * (3 - 2 * raw);144    };145 146    const apply = (p) => {147      const frame = frameRef.current;148      const content = contentRef.current;149      const maxX = Math.min(160, innerWidth * 0.08);150      frame.style.top = p * 80 + "px";151      frame.style.left = p * maxX + "px";152      frame.style.right = p * maxX + "px";153      frame.style.bottom = p * 120 + "px";154      frame.style.borderRadius = p * 28 + "px";155      content.style.transform = "scale(" + (1 - p * 0.18) + ")";156      content.style.opacity = 1 - p * 0.25;157    };158 159    // spring toward target even if the user scroll-blasts past160    const tick = () => {161      computeTarget();162      const diff = targetP - currentP;163      if (Math.abs(diff) < 0.0008) return apply(currentP);164      currentP += diff * 0.12;165      apply(currentP);166      requestAnimationFrame(tick);167    };168 169    addEventListener("scroll", () => requestAnimationFrame(tick));170    return () => removeEventListener("scroll", tick);171  }, []);172 173  return (174    <section ref={sectionRef} className="hero-scroll">175      <div className="hero-sticky">176        <div ref={frameRef} className="hero-frame">177          <HeroCodeSurface />178          <div className="hero-flashlight" />179          <div className="hero-chrome">buildbyalex.com</div>180        </div>181        <div ref={contentRef} className="hero-content">182          <Container size="default">183            <h1 className="t-hero">184              Сайты, AI-агенты185              и мобильные приложения.186              <span className="hl-accent">Под ключ за 1–3 недели.</span>187            </h1>188            <p className="hero-sub">{t("subhead")}</p>189            <Button href="/contact" size="lg">190              {t("primaryCta")}191            </Button>192          </Container>193        </div>194      </div>195    </section>196  );197  // ● Live · Worldwide — shipped, not staged198}199 200// app/api/contact/route.ts — leads land in Telegram instantly201import { NextRequest, NextResponse } from "next/server";202 203const TOKEN = process.env.TELEGRAM_BOT_TOKEN;204const CHAT = process.env.TELEGRAM_CHAT_ID;205 206export async function POST(req: NextRequest) {207  const { name, email, message } = await req.json();208 209  if (!name || !email) {210    return NextResponse.json({ error: "missing fields" }, { status: 400 });211  }212 213  const text = [214    "🟠 Новая заявка — buildbyalex",215    "Имя: " + name,216    "Email: " + email,217    "",218    message,219  ].join("220");221 222  await fetch("https://api.telegram.org/bot" + TOKEN + "/sendMessage", {223    method: "POST",224    headers: { "content-type": "application/json" },225    body: JSON.stringify({ chat_id: CHAT, text, parse_mode: "HTML" }),226  });227 228  return NextResponse.json({ ok: true });229}230 231// brand tokens — warm amber on near-black ink232export const theme = {233  accent: "#FF6B1A",234  accentHover: "#FF7C36",235  ink: "#050507",236  radius: { card: 28, pill: 999 },237  ship: "1–3 недели",238};239 240export function clamp(min, val, max) {241  return Math.max(min, Math.min(val, max));242}