import { useState } from "react";

const topics = [
{
id: "fundamental-rights",
icon: " ",
title: "Fundamental Rights",
subtitle: "Articles 14–32 | Part III",
color: "#e63946",
sections: [
{
heading: "Overview",
content: `Fundamental Rights are guaranteed under Part III of the Constitution (Artic
},
{
heading: "Article 14 — Right to Equality",
content: `Guarantees equality before law and equal protection of laws to all persons
},
{
heading: "Article 15 — Prohibition of Discrimination",
content: `Prohibits discrimination on grounds of religion, race, caste, sex, or place
},
{
heading: "Article 16 — Equality in Public Employment",
content: `Guarantees equality of opportunity in matters of public employment. No citi
},
{
heading: "Article 17 — Abolition of Untouchability",
content: `Untouchability is abolished and its practice in any form is forbidden. The
},
{
heading: "Article 18 — Abolition of Titles",
content: `Prohibits the State from conferring any title except military or academic d
},
{
heading: "Article 19 — Six Freedoms",
content: `Guarantees 6 freedoms to citizens only:
1. Freedom of speech and expression
2. Freedom to assemble peaceably without arms
3. Freedom to form associations or unions
4. Freedom to move freely throughout India
5. Freedom to reside and settle in any part of India
6. Freedom to practise any profession or carry on any occupation, trade or business
All freedoms can be reasonably restricted by the State.`
 },
{
heading: "Article 20 — Protection in Conviction",
content: `Three protections against arbitrary conviction:
(1) Ex-post-facto law: No person shall be convicted of an offence that was not an offence whe
(2) Double Jeopardy: No person shall be prosecuted and punished for the same offence more tha
(3) Self-incrimination: No person accused of an offence shall be compelled to be a witness ag
},
{
heading: "Article 21 — Right to Life & Personal Liberty",
content: `No person shall be deprived of his life or personal liberty except accordin
},
{
heading: "Articles 22–28 — Other Rights",
content: `Art 22: Protection against arbitrary arrest (right to be informed, right to
Art 23: Prohibition of trafficking and forced labour.
Art 24: Prohibition of child labour (below 14 years) in factories, mines, and hazardous emplo
Art 25–28: Freedom of religion — right to profess, practice, propagate religion; manage relig
},
{
heading: "Articles 29–30 — Cultural & Educational Rights",
content: `Art 29: Any section of citizens having distinct language, script, or cultur
Art 30: All minorities (religious or linguistic) have the right to establish and administer e
},
{
heading: "Article 32 — Constitutional Remedies (Heart of the Constitution)",
content: `Right to move the Supreme Court for enforcement of Fundamental Rights. Dr.
• Habeas Corpus — "To have the body" — detainee must be produced before court.
• Mandamus — "We command" — orders a public body to perform its duty.
• Prohibition — "To forbid" — stops lower court from exceeding jurisdiction.
• Certiorari — "To be certified" — quashes illegal orders of lower courts.
• Quo Warranto — "By what authority" — questions legality of holding public office.`
}
]
},
{
id: "dpsp",
icon: " ",
title: "Directive Principles",
subtitle: "Articles 38–51 | Part IV (DPSP)",
color: "#457b9d",
sections: [
{
heading: "Overview",
content: `DPSPs are guidelines to Central and State Governments for framing laws and
},
{
 heading: "Three Categories (42nd Amendment, 1976)",
content: `A. Socialistic Principles — establish social & economic justice, reduce ine
• Art 38: Promote welfare of people; social, economic, political justice.
• Art 39: Adequate means of livelihood; equal pay for equal work; prevent concentration of we
• Art 41: Right to work, education, public assistance in unemployment/old age/sickness.
• Art 43: Living wage and decent standard of life for workers.

B. Gandhian Principles — reflect Gandhi's vision of self-reliant village economy:

• Art 40: Organise Village Panchayats (basis of 73rd Amendment, 1992 — Panchayati Raj).
• Art 43: Promote cottage industries in rural areas.
• Art 46: Promote educational & economic interests of SCs, STs, weaker sections.
• Art 47: Prohibit intoxicating drinks and drugs injurious to health.

C. Liberal-Intellectual Principles — democratic polity & international peace:

• Art 44: Uniform Civil Code (UCC) — single set of civil laws for all citizens regardless of
• Art 45: Early childhood care and education for children up to age 14.
• Art 48: Modern agriculture and animal husbandry; prohibit cow slaughter.
• Art 51: Promote international peace and security; respect international law.`
},
{
heading: "Important Specific Articles",
content: `Art 39A: Free legal aid — NALSA (National Legal Services Authority) set up

Art 42: Just and humane conditions of work and maternity relief. Laws enacted: Industrial Dis

Art 44 (UCC): Most debated DPSP. Would replace personal laws based on religion with one unifo

Art 48A (added by 42nd Amendment, 1976): Protection and improvement of environment; safeguard

Art 43A (added by 42nd Amendment, 1976): Workers' participation in management of industries.

Art 45 (amended by 86th Amendment, 2002): Early childhood care and education — redirected to
},
{
heading: "FR vs DPSP — Key Difference",
content: `Fundamental Rights: Justiciable (enforceable by courts), protect individual
DPSPs: Non-justiciable (not enforceable by courts), promote social/economic welfare, Part IV.
However: Parliament can amend FRs to implement DPSPs (Directive Principles have persuasive fo
}
]
},
{
id: "union-executive",
icon: " ",
title: "Union Executive",
subtitle: "President, Vice President & Prime Minister",
color: "#2d6a4f",
 sections: [
{
heading: "Overview of Union Executive",
content: `The Union Executive runs the central government and includes:
• The President (Constitutional Head)
• The Vice President
• The Prime Minister and Council of Ministers
• The Attorney General of India (first law officer, legal advisor to government)
Similar to UK model, except India has an elected President instead of a hereditary monarch.`
},
{
heading: "President of India",
content: `Constitutional/nominal head of the executive. Elected by an Electoral Colle
• Term: 5 years. Can be re-elected.
• Qualifications: Citizen of India, 35+ years, eligible to be member of Lok Sabha.
• Removal: Impeachment under Article 61 — on ground of violation of Constitution. Motion init
},
{
heading: "Powers of the President",
content: `1. Executive Powers:
• Supreme Commander of all Armed Forces.
• Appoints PM (majority party leader in Lok Sabha), Council of Ministers, CJI & SC/HC judges,

2. Legislative Powers:
• Summons and prorogues Parliament sessions; can dissolve Lok Sabha.
• Gives assent to bills (can return bills once for reconsideration — veto power).
• Nominates 12 members to Rajya Sabha; 2 Anglo-Indian members to Lok Sabha.
• Addresses joint session on first day of each year.

3. Emergency Powers:
• Art 352: National Emergency — external aggression or armed rebellion.
• Art 356: President's Rule — Constitutional machinery failure in state.
• Art 360: Financial Emergency — threat to financial stability.

4. Pardoning Powers: Pardon, commutation, reprieve, respite, remission — especially for death
},
{
heading: "Vice President of India",
content: `• Ex-officio Chairman of the Rajya Sabha — presides over sessions.
• Elected by members of both Houses of Parliament (not Electoral College).
• Term: 5 years. Can be removed by majority of Rajya Sabha.
• Acts as President if President is unavailable (max 6 months); Chief Justice acts if both of
• Does not vote in Rajya Sabha except in case of a tie.
• Present VP: C.P. Radhakrishnan (15th VP, sworn in September 2025).
• Deputy Chairman of Rajya Sabha: Harivansh Narayan Singh.`
},
{
 heading: "Prime Minister",
content: `Real executive head (unlike President who is nominal head).

Role under Article 78 — Link between President & Council of Ministers:

• Communicates Council's decisions to the President.
• Chief advisor to the President.

Key Powers & Functions:

• Head of Council of Ministers — selects ministers, allots portfolios, can demand resignation
• Guides financial policies and ensures budget preparation.
• Represents India in national and international conferences.
• Can advise President to declare emergency.
• Head of: Nuclear Command Authority, NITI Aayog, Department of Atomic Energy & Space, Depart
• Takes critical national decisions (e.g., lockdowns, strategic calls).`
}
]
},
{
id: "parliament",
icon: " ",
title: "Parliament of India",
subtitle: "Lok Sabha & Rajya Sabha",
color: "#7b2d8b",
sections: [
{
heading: "Structure of Parliament",
content: `India has a Bicameral Legislature — Parliament consists of:
• President (legislative head — not a member but integral part)
• Rajya Sabha (Upper House / House of Elders)
• Lok Sabha (Lower House / House of People)

Parliamentary system: Westminster Model (British style). Parliament is the supreme legislativ

MP Qualifications: Citizen of India. 25+ years for Lok Sabha; 30+ years for Rajya Sabha. Must
},
{
heading: "Rajya Sabha — Composition & Key Facts",
content: `• Maximum strength: 250 members (238 elected + 12 nominated by President).
• 238 represent states and UTs; 12 nominated persons from literature, art, science, social se
• Permanent House — CANNOT be dissolved by the President.
• Member term: 6 years. Every 2 years, 1/3rd members retire (staggered elections).
• Presiding officer: Vice President (ex-officio Chairman). Deputy Chairman: Harivansh Narayan

Powers:
1. Legislative: Can pass all bills except Money Bills.
2. Financial: Cannot introduce Money Bills; can only recommend amendments (must return in 14
3. Executive: Questions ministers, debates, seeks explanations.
4. Judicial: Participates in election/impeachment of President, VP, judges.

Special Power: Art 249 — can empower Parliament to legislate on State List subjects (by 2/3rd
},
{
heading: "Lok Sabha — Composition & Key Facts",
content: `• Maximum strength: 552 seats (530 States + 20 UTs + 2 nominated Anglo-Indi
• Election: Adult franchise (universal suffrage). Seats reserved for SC/ST (not for religion)
• Term: 5 years (can be extended by 1 year during national emergency).
• Can be dissolved by President (on PM's advice).
• Speaker: Presides over Lok Sabha, elected by members. Current Speaker: Om Birla.
• Deputy Speaker: Elected by members. (Seat vacant since 2019).
• Pro-tem Speaker: Temporary speaker who administers oath to new members.

Powers:
1. Legislative: Introduces and passes all types of bills including Money Bills. Final authori
2. Financial: Exclusive power to introduce Money Bills. Controls Union budget, taxation, expe
3. Executive: Controls Council of Ministers; can pass No-Confidence Motion to remove governme
4. Electoral: Elects Speaker, Deputy Speaker; participates in election of President, VP; can
},
{
heading: "Parliamentary Sessions",
content: `1. Budget Session — Third week of February to May. Starts with President's
2. Monsoon Session — Third week of July to August/September. Mostly devoted to legislative bu
3. Winter Session — Early November to third week of December. Shortest session. Urgent legisl
},
{
heading: "Parliamentary Terminology",
content: `• Adjournment: Termination of a sitting; next date is known and fixed.
• Adjournment Sine Die: Termination without fixing next date ("without a day").
• Prorogation: End of a session by the President; does not dissolve the House.
• Dissolution: Ends life of Lok Sabha (not Rajya Sabha — it's permanent). Leads to fresh elec
• Question Hour: First hour (11am–12pm) — MPs ask questions to ministers. Ensures executive a
• Zero Hour: Informal period after Question Hour (12–1pm). Urgent issues raised without prior
• Guillotine: Parliamentary device to pass budget quickly — Speaker puts all undiscussed dema
• Quorum: Minimum members required = 1/10th of total membership.
• Lame Duck Session: Last session of old Lok Sabha after elections but before new one begins.
},
{
heading: "Officers of Parliament",
content: `Speaker (Lok Sabha): Chief presiding officer. Elected by Lok Sabha members.
Pro-tem Speaker: Temporary; administers oath to new members; role ends after Speaker is elect
Deputy Speaker: Elected by Lok Sabha; by convention belongs to opposition party. Performs Spe
Panel of Chairpersons: 6 members nominated by Speaker; any one can preside if both Speaker &
}
]
},
 {
id: "courts",
icon: " ",
title: "Courts of India",
subtitle: "Supreme Court & High Courts",
color: "#b5451b",
sections: [
{
heading: "Supreme Court of India",
content: `• Established: 26 January 1950 under the Constitution of India.
• Articles 124–147 deal with SC's organization and powers.
• Highest judicial authority; also called the Apex Court of India. Located in New Delhi.
• Custodian of Fundamental Rights — prevents government from becoming autocratic.
• Historical note: The Regulating Act of 1773 established the Supreme Court at Calcutta durin
• Quote by Alladi Krishnaswamy Aiyar: "The future evolution of the Indian constitution will d
},
{
heading: "Composition & Appointment",
content: `• Maximum strength: 34 judges (1 Chief Justice of India + 33 other judges).
• Chief Justice appointed by the President in consultation with other judges.
• Other judges appointed by President in consultation with the Chief Justice.
• Qualifications: Citizen of India; judge of a High Court for at least 5 years OR advocate in
• Retirement age: 65 years.
• Retired judges: Cannot practice as advocate in any court in India (but can be appointed to
• Present CJI: Justice Surya Kant (53rd CJI, assumed office 24 November 2025).`
},
{
heading: "Removal of SC Judges",
content: `• Article 124(4): Removal only by Presidential order after Parliament passe
• Grounds: (1) Proved misbehaviour, (2) Incapacity to give impartial judgment.
• Procedure: Committee investigates → report of guilt → motion in both Houses → must pass by
},
{
heading: "Jurisdiction of Supreme Court",
content: `1. Original Jurisdiction: Disputes between states, or between states and Ce
2. Appellate Jurisdiction: Appeals from High Courts in civil, criminal, and constitutional ma
3. Advisory Jurisdiction (Art 143): President can seek SC's opinion on questions of law/publi
4. Writ Jurisdiction (Art 32): Issues writs to enforce Fundamental Rights (this is itself a F
},
{
heading: "5 Types of Writs",
content: `1. Habeas Corpus — "To have the body": Police must produce arrested person

2. Mandamus — "We command": Directs a person, public official, or government body to perform

3. Quo Warranto — "By what authority": Investigates whether a person has legal authority to h
4. Certiorari — "To be certified": Higher court quashes order of a lower court/tribunal passe

5. Prohibition — "To forbid": Supreme Court directs lower courts/tribunals to stop proceeding

Note: Art 32 = SC issues writs ONLY for Fundamental Rights. Art 226 = HCs can issue writs for
},
{
heading: "High Courts of India",
content: `• Highest judicial body at state level; also called the Apex Court of the S
• Articles 214–231 deal with HCs' organization and powers.
• First HC: Established in 1862 in Calcutta, followed by Bombay and Madras.
• Currently: 25 High Courts in India (as of 2026).
• Some small states share HCs: Bombay HC serves Maharashtra, Goa, Dadra & Nagar Haveli, Daman
},
{
heading: "HC Composition & Appointment",
content: `• Consists of Chief Justice + other judges (number varies by workload — dec
• Appointment: President in consultation with CJI + Governor of State (who consults the Chief
• Qualifications: Citizen of India; advocate in HC for at least 10 years OR at least 10 years
• Retirement age: 62 years (lower than SC's 65 years).
• Resignation: By writing to the President.
• Removal: Same impeachment process as SC judges (Art 124(4)).
• Present Chief Justice of Karnataka HC: Justice Vibhu Bakhru (assumed office 19 July 2025).`
},
{
heading: "Hierarchy of Courts",
content: `Supreme Court of India (Apex)
↓
High Courts (one per state/group of states)
↓
District Courts / Sessions Courts / City Civil Courts
↓
Sub-ordinate Courts / Magistrate Courts`
}
]
}
];

export default function CIE2StudyGuide() {

const [active, setActive] = useState(null);
const [openSection, setOpenSection] = useState(null);
const [search, setSearch] = useState("");

const activeTopic = [Link](t => [Link] === active);

const filtered = [Link]()

? [Link](t => ({
 ...t,
sections: [Link](
s =>
[Link]().includes([Link]()) ||
[Link]().includes([Link]())
)
})).filter(t => [Link] > 0)
: topics;

return (
<div style={{
minHeight: "100vh",
background: "linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)",
fontFamily: "'Georgia', 'Times New Roman', serif",
padding: "0",
}}>
{/* Header */}
<div style={{
background: "rgba(255,255,255,0.04)",
borderBottom: "1px solid rgba(255,255,255,0.1)",
padding: "24px 20px 20px",
textAlign: "center",
backdropFilter: "blur(10px)",
}}>
<div style={{ fontSize: 13, letterSpacing: 4, color: "#a89bd8", textTransform: "upper
Indian Constitution
</div>
<h1 style={{
margin: 0,
fontSize: "clamp(22px, 5vw, 34px)",
color: "#fff",
fontWeight: 700,
letterSpacing: -0.5,
}}>
CIE 2 Study Guide
</h1>
<p style={{ margin: "8px 0 0", color: "#9d8fd4", fontSize: 14 }}>
5 Topics · Tap any topic to explore
</p>
<input
type="text"
placeholder=" Search any topic or keyword..."
value={search}
onChange={e => { setSearch([Link]); setActive(null); }}
style={{
marginTop: 16,
width: "100%",
 maxWidth: 400,
padding: "10px 16px",
borderRadius: 30,
border: "1px solid rgba(168,155,216,0.4)",
background: "rgba(255,255,255,0.07)",
color: "#fff",
fontSize: 14,
outline: "none",
boxSizing: "border-box",
}}
/>
</div>

<div style={{ padding: "16px 12px", maxWidth: 720, margin: "0 auto" }}>

{/* Search results mode */}

{[Link]() ? (
<div>
{[Link] === 0 && (
<div style={{ color: "#9d8fd4", textAlign: "center", marginTop: 40, fontSize: 1
No results found for "{search}"
</div>
)}
{[Link](topic => (
<div key={[Link]} style={{ marginBottom: 20 }}>
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10
<span style={{ fontSize: 20 }}>{[Link]}</span>
<span style={{ color: [Link], fontWeight: 700, fontSize: 16 }}>{topic.
</div>
{[Link]((sec, i) => (
<SectionCard key={i} sec={sec} color={[Link]} search={search} />
))}
</div>
))}
</div>
) : (
<>
{/* Topic Grid */}
{!active && (
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginB
{[Link](topic => (
<button
key={[Link]}
onClick={() => { setActive([Link]); setOpenSection(null); }}
style={{
background: `linear-gradient(135deg, ${[Link]}22, ${[Link]}11
border: `1.5px solid ${[Link]}55`,
 borderRadius: 16,
padding: "18px 14px",
cursor: "pointer",
textAlign: "left",
color: "#fff",
transition: "all 0.2s",
}}
>
<div style={{ fontSize: 28, marginBottom: 8 }}>{[Link]}</div>
<div style={{ fontWeight: 700, fontSize: 15, marginBottom: 4, color: "#ff
<div style={{ fontSize: 11, color: [Link], letterSpacing: 0.3 }}>{to
<div style={{ marginTop: 10, fontSize: 11, color: "rgba(255,255,255,0.4)"
{[Link]} sections →
</div>
</button>
))}
</div>
)}

{/* Topic Detail */}

{active && activeTopic && (
<div>
<button
onClick={() => setActive(null)}
style={{
background: "rgba(255,255,255,0.08)",
border: "1px solid rgba(255,255,255,0.15)",
color: "#a89bd8",
padding: "8px 16px",
borderRadius: 20,
fontSize: 13,
cursor: "pointer",
marginBottom: 16,
display: "flex",
alignItems: "center",
gap: 6,
}}
>
← All Topics
</button>

<div style={{
background: `linear-gradient(135deg, ${[Link]}33, ${activeTopic.
border: `1.5px solid ${[Link]}66`,
borderRadius: 18,
padding: "20px 18px",
marginBottom: 16,
 }}>
<div style={{ fontSize: 36, marginBottom: 8 }}>{[Link]}</div>
<h2 style={{ margin: 0, color: "#fff", fontSize: 22, fontWeight: 700 }}>{ac
<p style={{ margin: "6px 0 0", color: [Link], fontSize: 13 }}>{a
</div>

{[Link]((sec, i) => (
<AccordionSection
key={i}
sec={sec}
color={[Link]}
isOpen={openSection === i}
onToggle={() => setOpenSection(openSection === i ? null : i)}
/>
))}
</div>
)}
</>
)}

{/* Quick Revision Tips */}

{!active && !search && (
<div style={{
background: "rgba(255,255,255,0.04)",
border: "1px solid rgba(255,255,255,0.1)",
borderRadius: 16,
padding: "18px 16px",
marginTop: 8,
}}>
<div style={{ color: "#f4d35e", fontWeight: 700, fontSize: 14, marginBottom: 12 }
Quick Revision Tips
</div>
{[
"Fundamental Rights (Art 14–32) = Justiciable. DPSP (Art 38–51) = Non-justiciab
"Art 32 = 'Heart & Soul' of Constitution (Ambedkar). SC issues writs for FRs.",
"Rajya Sabha: Permanent house, max 250, VP is ex-officio Chairman.",
"Lok Sabha: max 552, Speaker is Om Birla, term 5 years, can be dissolved.",
"SC: 34 judges, retire at 65. HC: retire at 62. Both removed by impeachment.",
"President's Rule = Art 356 | National Emergency = Art 352 | Financial = Art 36
"5 Writs: Habeas Corpus, Mandamus, Certiorari, Prohibition, Quo Warranto.",
"PM is real head; President is nominal/constitutional head.",
].map((tip, i) => (
<div key={i} style={{
display: "flex",
gap: 10,
marginBottom: 8,
fontSize: 13,
 color: "rgba(255,255,255,0.8)",
lineHeight: 1.5,
}}>
<span style={{ color: "#f4d35e", flexShrink: 0 }}>•</span>
<span>{tip}</span>
</div>
))}
</div>
)}
</div>
</div>
);
}

function AccordionSection({ sec, color, isOpen, onToggle }) {

return (
<div style={{
background: "rgba(255,255,255,0.04)",
border: `1px solid ${isOpen ? color + "66" : "rgba(255,255,255,0.08)"}`,
borderRadius: 14,
marginBottom: 10,
overflow: "hidden",
transition: "border-color 0.2s",
}}>
<button
onClick={onToggle}
style={{
width: "100%",
background: "none",
border: "none",
padding: "14px 16px",
cursor: "pointer",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
color: "#fff",
textAlign: "left",
}}
>
<span style={{ fontWeight: 700, fontSize: 14, color: isOpen ? color : "#ddd" }}>
{[Link]}
</span>
<span style={{ color, fontSize: 18, fontWeight: 300, flexShrink: 0, marginLeft: 8 }}>
{isOpen ? "−" : "+"}
</span>
</button>
{isOpen && (
 <div style={{
padding: "0 16px 16px",
color: "rgba(255,255,255,0.82)",
fontSize: 13.5,
lineHeight: 1.75,
whiteSpace: "pre-wrap",
borderTop: `1px solid ${color}33`,
paddingTop: 14,
}}>
{[Link]}
</div>
)}
</div>
);
}

function SectionCard({ sec, color, search }) {

const highlight = (text) => {
if (!search) return text;
const parts = [Link](new RegExp(`(${search})`, "gi"));
return [Link]((p, i) =>
[Link]() === [Link]()
? <mark key={i} style={{ background: "#f4d35e44", color: "#f4d35e", borderRadius: 2 }
: p
);
};

return (
<div style={{
background: "rgba(255,255,255,0.04)",
border: `1px solid ${color}44`,
borderRadius: 12,
padding: "12px 14px",
marginBottom: 10,
}}>
<div style={{ fontWeight: 700, fontSize: 13.5, color, marginBottom: 6 }}>{highlight(sec
<div style={{ fontSize: 13, color: "rgba(255,255,255,0.78)", lineHeight: 1.7, whiteSpac
{highlight([Link])}
</div>
</div>
);
}